-------
Phần 35.
jQuery trong Openemr
Quay trở lại dự án Openemr, đây là một dự án lớn, vì vậy có
nhiều thứ có thể học được từ đây.
Qua các phần trước, đã biết cách mở tập tin index.php, sau
đó theo đường dẫn interface/login/login.php, mở tiếp tập tin login.php. Tuy
nhiên, vì đây là các tập tin mã nguồn PHP, mà mình lại chưa có kiến thức về
ngôn ngữ PHP, nên rất khó để tìm hiểu tiếp trong đó.
Tạm thời, sẽ tìm hiểu ứng dụng Openemr bằng cách khác.
Mở trình duyệt, vào lại trang http://www.open-emr.org/
Chọn mục DEMO (trên đầu trang), tìm và mở đường dẫn này: OpenEMR
5.0.0 Main Demo Link: http://demo.openemr.io/openemr
Hoặc nhập luôn đường dẫn này vào trình duyệt: http://demo.openemr.io/openemr/interface/login/login.php?site=default
Khi mở được trang đăng nhập, nhập Username là admin,
Password là pass để đăng nhập vào ứng dụng.
Bấm Login, để mở giao diện chính của ứng dụng.
Ở khung menu bên trên, bấm vào mục Patient/Client >
New/Search. Kết quả như hình bên dưới.
Tiếp theo, bấm chuột phải vào vùng tô màu xanh, chọn Inspect
để mở cửa sổ Developer Tools. Xem kĩ phần mã nguồn trong cửa sổ Developer
Tools, sẽ chỉ thấy mã JavaScript, thư viện jQuery, mã HTML, CSS. Nhưng nếu xem
mã nguồn trong thư mục Openemr (bằng Sublime Text) sẽ thấy có thêm ngôn ngữ
PHP, vậy mã nguồn của PHP đi đâu mất rồi? Cái này sẽ tìm hiểu trong các phần sau.
Ở đây chỉ quan tâm tới HTML, CSS, JavaScript, jQuery.
Sử dụng qua các ô nhập thông tin của một bệnh nhân (Patient)
ở giao diện trên (phần khung màu xanh), sau đó sẽ dùng HTML, CSS, JavaScript
hoặc jQuery để làm một cái form nhập liệu tương tự.
Tham khảo phần mã nguồn trong cửa sổ Developer Tools để làm.
Tự viết lại từng dòng mã để học về HTML, CSS, JavaScript, và
jQuery.
Lưu lại đoạn mã để tham khảo,
<!DOCTYPE html>
<html lang="en">
<head>
<meta
charset="UTF-8"><title>Phan35</title>
<style>
.bgcolor
{ background: yellow; }
.capitalize
{ text-transform: capitalize; }
</style>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function()
{
//show/hide
div-1
$('#chkWho').click(function()
{
$('#div_1').toggle(this.checked);
});
//change
background for inputs
$('#div_1
input, #div_1 select').bind('click',function() {
$(this).toggleClass('bgcolor');
});
});
</script>
</head>
<body>
<div>
<label><input
type="checkbox" id="chkWho">
<strong>Who</strong></label>
</div>
<div
id="div_1" style="display:none">
<table>
<tbody>
<tr>
<td><strong>Name</strong></td>
<td>
<select
id="form_title">
<option
value>Unassigned</option>
<option
value="Mr.">Mr.</option>
<option
value="Mrs.">Mrs.</option>
<option
value="Ms.">Ms.</option>
<option
value="Dr.">Dr.</option>
</select>
<input
class="capitalize" type="text">
<input
class="capitalize" type="text">
<input
class="capitalize" type="text">
</td>
<td><strong>External
ID:</strong></td>
<td><input
type="text"></td>
</tr>
<tr>
<td><strong>DOB:</strong></td>
<td><input
type="date"></td>
<td><strong>Sex:</strong></td>
<td>
<select
name="" id="">
<option
value>Unassigned</option>
<option
value="">Female</option>
<option
value="">Male</option>
</select>
</td>
</tr>
<tr>
<td><strong>S.S.:</strong></td>
<td><input
type="text"></td>
<td><strong>License/ID</strong></td>
<td><input
type="text"></td>
</tr>
<tr>
<td><strong>Marital
Status</strong></td>
<td>
<select
name="" id="">
<option
value>Unassigned</option>
<option
value="married">Married</option>
<option
value="single">Single</option>
<option
value="divorced">Divorced</option>
<option
value="widowed">Widowed</option>
<option
value="separated">Separated</option>
<option
value="domestic partner">Domestic Partner</option>
</select>
</td>
</tr>
<tr>
<td><strong>User
Defined</strong></td>
<td><input
type="text"><input type="text"><input
type="text"></td>
</tr>
<tr>
<td><strong>Billing
Note:</strong></td>
<td><input
type="text"></td>
</tr>
</tbody>
</table>
</div><!--
end div_1 -->
</body>
</html>
-----------
Cập nhật [8/10/2017][10/10/2016]
-----------