blogE cah

Minggu, 28 Maret 2010

Membuat Aplikasi Login sederhana menggunakan Variabel di PHP

Aplikasi login User dalam suatu situs dinamis menggunakan php sudah hampir menjadi kebutuhan wajib. Tanpa adanya login rasa-rasanya ada yang kurang dari suatu situs. Dengan login kita bisa mengatur siapa saja yang berhak masuk ke halaman tertentu dan siapa saja yang tidak boleh. Disamping itu secara tidak langsung, login bisa digunakan untuk mencatat siapa saja yang sedang online, siapa saja yang sering mengunjungi situs kita dan seterusnya.

Membuat Tampilan Awal Login
Buatlah file dengan nama login.php sebagai tampilan awal halaman login sebagai berikut :

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<html>

<head>

<title>Form login</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">



</style>

</head>

<body>

<div align="center">

<form action="periksa.php" method="post" name="login">

<table width="286" border="0" cellpadding="0" cellspacing="0">



<tr bgcolor="black">

<td height="19" colspan="2" align="center" valign="middle">

<font color="#FFFFFF">LOGIN DI SINI</font></td>

</tr>

<tr>

<td width="106" height="27"> </td>

<td width="180"> </td>

</tr>

<tr>

<td height="18" align="right" valign="middle">Username : </td>

<td valign="middle">

<input name="username" type="text" id="username" size="20"></td>

</tr>

<tr>

<td height="18" align="right" valign="middle">Password : </td>

<td valign="middle">

<p>

<input name="password" type="password" id="password" size="20"></td>

</p>

</tr>

<tr>

<td height="19"> </td>

<td></td>

</tr>

<tr>

<td height="18" valign="top"> </td>

<td valign="middle">

<input name="login" type="submit" id="login" value=" Login "></td>

</tr>

<tr>

<td height="28"> </td>

<td></td>

</tr>

<tr bgcolor="black">

<td height="18" colspan="2" valign="top"> </td>

</tr>

</table>

</form>

</div>

</body>

</html>

hasil tampilan login dari script diatas,

Dari program tampilan awal di atas, kita bisa lihat bahwa program menggunakan form inputan sbb :
- username bertype text
- password bertype password
- tombol login bertype submit
Jika tombol login ditekan maka isi form akan diproses di halaman periksa.php sesuai dengan action pada tag form.

Membuat Halaman Pemeriksaan Login
Setelah tampilan awal kita buat, maka kita buat halaman pemeriksaan login untuk memeriksa apakah username dan password yang diinputkan benar atau salah. Buatlah file dengan nama periksa.php sebagai berikut :

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>Hasil login</title>

</head>

<body>

<div align="center">

<?php

$acc_user = 'user';

$acc_pas = 'user';

if (isset($_POST['login'])) {

$username = $_POST['username']; // diambil dari nama input di form login

$password = $_POST['password']; // diambil dari nama input di form login

$username = strip_tags($username);

$password = strip_tags($password);

if (($username==$acc_user) && ($password==$acc_pas))

{

session_start();

$_SESSION['user'] = $username;

echo 'Selamat datang, Login Anda berhasil. ';

} else {

echo 'Masukan Username dan password Anda dengan benar'.

'<br/>'.

'<a href="login.php">Ulangi Login</a>'.

'<br/>';

}

}

?>

Hasil tampilan dari pemeriksaan Login.

user dapat memasukan username dan password dengan benar.

user tidak dapat memasukan username dan password dengan benar.

apabila user tidak dapat memasukan username dan password dengan benar maka dapat melakukan login ulang.

Untuk ikut mencoba hasil dari aplikasi Login sederhana diatas dapat klik disini, username dan password "user".

Jumat, 05 Maret 2010

Aplikasi kalkulator sederhana menggunakan JavaScript

Java script merupakan sebuah bahasa scripting yang dikembangkan oleh Netscape.Dengan Java script kita bisa dengan mudah membuat sebuah halaman web yang interaktif. Program Java script dituliskan pada file HTML (*.htm atau *.html) dengan menggunakan tag kontainer . Dengan kata lain, kita tidak perlu menuliskan program Javascript pada file terpisah.

Contoh Javascript Sederhana

Membuat aplikasi kalkulator sederhana dengan menggunakan JavaScript

Dibawah ini merupakan scripting keseluruhan untuk pembuatan aplikasi kalkulator sederhana yang telah saya buat.

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>Calkulator</title>

</head>

</body>

<p align="left"><font face="verdana" size="-1">This desaign by cah_0353</font><br>

<a href="www.mainjet.blogspot.com">www.mainjet.blogspot.com</a></font></p>

</body>

</html>

Dari Scripting diatas diperoleh tampilan desain kalkulator sederhana sebagai berikut:

Sabtu, 27 Februari 2010

Desain web memanfaatkan Cascading Style Sheet (CSS)

Cascading style sheet (CSS) merupakan sekumpulan aturan yang menyatakan bagaimana style diaplikasikan ke tag-tag HTML di dalam dokumen. Rekomendasi CSS menguraikan tiga jenis style:

Embedded: properti style diletakkan di dalam satu blok di dokumen HTML.

Inline: properti style diterapkan secara langsung per baris atau perelemen HTML.

Linked: properti style diletakkan di file berekstensi css dan dikaitkan dengan dokumen HTML.

Selain mengulas tentang pemanfaatan CSS, bagian ini juga menekankan pada pembuatan desain dengan menggunakan division. Bagaimanapun, untuk menghasilkan desain halaman web yang baik, penggunaan tabel tidak disarankan dan sebagai gantinya adalah dengan memanfaatkan division.

Berikut ini merupakan contoh desin web yang menggunakan CSS

untuk langakah pertama membutuhkan linked CSS dan HTML. Buka notepad terus tulis script berikut ini :

#wrapper {

margin: auto;

width: 1000px;

padding:5px 2px 5px 2px;

border: 1px solid green;

}

#header {

height: 100px;

margin-bottom:5px;

border: 1px solid blue;

}

#inner {

margin: auto;

border: 1px solid green;

}

#sidebar {

float: left;

width: 200px;

height: 390px;

border: 1px solid blue;

}

#top {

float: right;

width: 750px;

height: 390px;

border: 1px solid green;

}

#content {

height: 100px;

border: 1px solid blue;

}

#isi{

float: left;

width: 400px;

height:220px;

border: 1px solid green;

}

#info {

float: right;

width: 235px;

height: 150px;

border: 1px solid green;

}

#footer {

clear: both;

height: 50px;

border: 1px solid blue;

}

setelah menuliskan file diatas simpan dalam satu folder dengan nama style.css

kemudian buka notepad lagi dan tuliskan list dibawah ini:

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>Tugas2 Desain Layout sederhana </title>

<link rel="stylesheet" href="style.css" type="text/css" />

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></head>

<body>

<div id="wrapper">

<div id="header">

Header

</div>

<div id="inner">

<div id="sidebar">

Sidebar

</div>

<div id="top">

<div id="content">

Gambar atas

</div>

<div id="isi">

Isi

</div>

<div id="info">

Info

</div>

</div>

</div>

<div id="footer">

Footer

</div>

</div>

</body>

</html>

Simpan file tersebut dalam satu folder dengan file.css yang sudah ada, misalnya dengan nama style.html

Berikut hasil dari kedua list diatas:

Gambar layout desain web.

Untuk membuat desain web menggunakan css diperlukan list layout dasar sperti diatas.
Selain itu menambahkan list lagi yang diperlukan untuk tampilan dari desain web tersebut.
Dibawah ini contoh list untuk desain web.

#wrapper {

margin: auto;

width: 1000px;

background-color:#C00;

padding: 5px 2px 5px 2px;

}

#header {

height: 100px;

background-color:#03C;

}

#header1 {

height: 20px;

text-align:right;

padding-right: 10px;

color:#FFF;

}

#header2 {

height: 35px;

color:#FF0;

}

#header3 {

height: 25px;

text-align:right;

color:#FFF;

padding-right: 10px;

}

#inner {

margin:auto;

}

#sidebar {

float: left;

width: 200px;

height: 400px;

background-color:#399;

}

#top {

float: right;

width:800px;

height: 400px;

}

#content {

height: 100px;

}

#isi {

float: left;

width: 580px;

padding-left: 10px;

height: 300px;

background-color:#6C6;

}

#info {

float: right;

width: 200px;

height: 300px;

padding-left: 10px;

background-color:#666;

}

#footer {

clear: both;

height: 50px;

color:#FFF;

background-color:#00C;

}

#leftmenu ul {

width: 200px;

list-style-type:none;

padding:0; margin:0;

}

#leftmenu a:link, #leftmenu a:visited, #leftmenu a:active {

padding-left: 15px;

text-decoration: none;

}

#leftmenu a {

padding: 5px 0px 5px 15px; display: block;

background: #0FF no-repeat left center;

margin: 0px 0px 1px; color: #000;

}

#leftmenu a:hover {

background: #0F0 no-repeat left center; color: #FFF;

}

Simpan file diatas dengan nama terserah contoh desain.css

kemudian buat lagi list seperti dibawah ini:

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>Tugas2 Desain Layout Sederhana</title>

<link rel="stylesheet" href="desain.css" type="text/css" />

</head>

<body>

<div id="wrapper">

<div id="header">

<img src="gambar1.jpg" width="104" height="97" align="left" />

<div id="header1">Home | Profil | Contact | About My</div>

<div id="header2">

<h1>Cah_0353 Desain </h1>

</div>

<div id="header3">Search

<input type="text" />

</div>

</div>

<div id="inner">

<div id="sidebar">

<div id="leftmenu">

<ul>

<li><a href="#"><strong>Home</strong></a></li>

<li><strong><a href="#">Profil</a></strong></li>

<li><strong><a href="#">Tutorial</a></strong></li>

<li><strong><a href="#">Tips & Tricks</a></strong></li>

<li><strong><a href="#">Software's</a></strong></li>

</ul>

</div>

</div>

<div id="top">

<div id="content"><img src="gambar.jpg" width="800" height="102" /></div>

<div id="isi">

<h2>Kecerdasan Buatan</h2>

<p>24 Februari 2010 [23:00]<br />

Kecerdasan Buatan (bahasa Inggris: Artificial Intelligence atau AI) didefinisikan sebagai kecerdasan yang ditunjukkan oleh suatu entitas buatan. Sistem seperti ini umumnya dianggap komputer. Kecerdasan diciptakan dan dimasukkan ke dalam suatu mesin (komputer) agar dapat melakukan pekerjaan seperti yang dapat dilakukan manusia. Beberapa macam bidang yang menggunakan kecerdasan buatan antara lain sistem pakar, permainan komputer (games), logika fuzzy, jaringan syaraf tiruan dan robotika.</p>

<p>Raed more...</p>

</div>

<div id="info">

<p><strong>cetak/ekspor

</strong>

<ul>

<li>Untuk Buku</li>

<li>Sebagai PDF</li>

<li>Versi Cetak</li>

</ul>

Simpan file diatas dalam satu folder dengan file desain.css dengan nama yang anda inginkan contoh desain.html

Hasil tampilan dari list desain web diatas yakni sebagai berikut:

Gambar desain web dari list diatas.

Sabtu, 20 Februari 2010

Pembutan template web memanfaatkan table

Membuat template disain web dengan memanfaatkan table. Pertama kali yang diperhatikan dalam membuat desain dengan metode ini yakni menentukan banyaknya kolom yang akan digunakan.

Untuk bagian header membutuhkan tiga buah kolom kemudian dari kolom tersebut di gabung untuk menjadi satu kolom.

Untuk penggabungan kolom tersebut dengan memanfaatkan script sebagai berikut.

<th width="1000" colspan=3 >header</th>

Dalam pembuatan bagian footer sama juga halnya membuat header, yaitu penggabungan tiga kolom menjadi satu kolom.

Untuk pembuatan left menu, right menu dan content membutuhkan tiga table, scripnya sebagai berikut.

<th width="200" height="500" >left menu</th>

<th width="600" height="500" >Contens</th>

<th width="200" height="500" >right menu</th>

Dalam pembuatan template desain web dengan table seperti tampilan gambar diatas yakni script keseluruhannya sebagai berikut.

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>Tugas1</title>

</head>

<body>

<table border=3 align="center" cellspacing=0 cellpadding=15>

<tr>



<th width="1000" colspan=3 >header</th>

</tr>



<tr>

<th width="200" height="500" >left menu</th>

<th width="600" height="500" >Contens</th>

<th width="200" height="500" >right menu</th>

</tr>

<tr>



<th width="1000" colspan=3 >Footer</th>

</tr>

</table>

</body>

</html>

Selasa, 16 Juni 2009

Telemedisin Dalam Aplikasi Jaringan

Telemedisin atau teleradiologi dalam jaringan merupakan elemen yang disebut PACS (Picture Archiving and Communication System) yang terdiri dari akusisi, penyimpan dan pengarsipan, pengaksesan, manipulasi dari informasi citra digital, dan transmisi. Dengan teknologi ini tidak lagi akan terjadi transportasi fisik X-ray antara departemen radiologi dan klinik. Dalam akusisi data, untuk memenulli syarat ekonomis, keandalan, dan kecepatan tinggi, fasilitas transmisi citra memerlukan jaringan kecepatan tinggi dengan media fiber optik sedangkan transmisi data dan informasi lainnya dari pasien dapat menggunakan standar industri Ethemet dengan kecepatan yang lebih rendah. Fasilitas penyimpan perlu memenuhi syarat keandalan, kecepatan, keamanan, dan ekonomis. Penyimpan dapat terdiri dari penyimpan data citra dalam jangka pendek dan jangka panjang. Penyimpan dalam jangka pendek dapat berupa dics array yang dapat diakses sangat cepat dengan kompresi 'lossless' dengan ratio kompresi yang kecil. Data tekstual dapat disimpan dalam basis data terpisah. Data citra yang tersimpan dalam disc array dapat diakses oleh workstation melalui jaringan fiber optik. Setelah data citra selesai dievaluasi dan dilaporkan oleh bagian radiologi, data citra dapat disimpan dalam disk optik pada keadaan terkompres dengan rasio kompresi yang cukup tinggi. Untuk penampilan data citra diperlukan suatu monitor dengan resolusi yang sangat tinggi bagi kebutuhan diagnostik. Di samping itu, masih diperlukan suatu sistem manajemen data untuk memanipulasi data citra supaya pengguna dapat dengan mudah mencari dan menampilkan citra yang dibutuhkan untuk suatu keperluan klinis tertentu.
PACS merupakan salah satu komponen dalam sistem infommasi kesehatan yang mempunyai kompleksitas teknologi yang tinggi. Implementasi PACS dikaitkan dengan sistem informasi radiologi dan rumahsakit (RIS dan HIS) diharapkan memperbaiki kualitas dari pelayanan pasien dan mendukung pekerjaan administratif sehingga memperbaiki efisiensi rumah sakit.
Pengembangan PACS terkait erat dengan pengembangan teknologi untuk peralatan pencitraan kedokteran, penyimpan dan pengarsipan, jaringan, workstation, dan tampilan. Instalasi ini sangat bervanasi dalam perangkat keras dan lunak, level interkoneksi dan integrasi fungsional dan berbagai sistem informasi seperti PACS, RIS (Radiology Information System), HIS (Hospital Information System) dan sistem departemen lainnya. RIS berhubungan dengan aliran dari informasi administratif seperti penerimaan pasien, penjadwalan ruang pemeriksaan dan peralatan, dan keuangan. PACS dan RIS dapat dikombinasikan ke dalam suatu manajemen citra, pengarsipan, dan sistem komunikasi (IMACS). Integrasi akan menghasilkan akses yang cepat dan mudah ke semua data yang relevan dari pasien, tidak tergantung lokasi penyimpanan data.
Data terbesar yang dihasilkan dalam rumahsakit berasal dari data citra dalam departemen radiologi. Sebagai perbandingan, bila dalam suatu rumah sakit volume data untuk RIS sekitar 3 MB per hari, maka volume data citra diperkirakan sekitar 10-15 Gbytes per hari.

Pengarsipan digital didesain untuk dapat diakses dengan cepat dari workstation untuk semua citra pasien selama dirumahsakit. Hal ini memerlukan suatu pengarsipan sentral yang terdiri dari peralatan penyimpan besar yang juga andal terhadap kehilangan data. Untuk pasien yang diperbolehkan pulang, citra disimpan pada penyimpan cadangan seperti disk optik dalam bentuk terkompres dengan perbandingan 2.5:1. Disk ini diorganisasikan dalam bentuk "jukeboxes". Satu jukebox mempunyai kapasitas dari beberapa ratus Gbytes sampai beberapa Tbytes. Sebagai estimasi untuk suatu rumahsakit, akses langsung untuk satu tahun memerlukan sekitar 2,5 Tbyte. Jaringan komunikasi yang diperlukan untuk mendukung perkiraan kapasitas input-output sebesar 100-150 Gbyte transfer per hari adalah merupakan jaringan kecepatan tinggi.
Pengolahan dan Analisis Citra
Workstation diagnostik dapat digunakan untuk memproses citra sehingga memberikan visualisasi yang lebih baik pada monitor. Pada umumnya radiolog sering menggunakan pengolahan citra sederhana seperti perbesaran, rotasi, transformasi level dan lebar jendela yang mirip dengan mengamati citra film menggunakan cahaya kuat dan redup atau merubah kurva gradasi intensitas. Pengolahan yang lain membutuhkan usaha lebih lanjut untuk dapat diterima oleh radiolog.
Dalam pengolahan citra medis kami telah mengembangkan prosedur perbaikan citra, deteksi tepi, analisis citra, perbesaran, pewarnaan semu, komputasi geometris, dan kompresi data citra. Untuk memenuhi kebutuhan pengolahan kecepatan tinggi, kami menggunakan prosesor citra TMS320C80 yang diantarmukakan pada komputer. Waktu eksekusi yang dibutuhkan untuk menjalankan perbaikan citra dan kompresi adalah sekitar 10-40 milidetik. Hal ini memungkinkan pengolahan waktu riel untuk diimplementasikan.
Standard
Standard merupakan suatu kesepakatan untuk mengimplementasikan teknologi dan menjamin kemampuan komunikasi antara peralatan-peralatan yang dihasilkan oleh manufaktur yang berbeda. Standard memungkinkan terjadinya pertukaran informasi antar kota dan negara.
Standard yang dibutuhkan mencakup antara lain infrastruktur informasi, komunikasi, dan interoperabilitas, representasi informasi, sekuritas dan konfidensial, pencitraan, dan dokumentasi. ACR (the American College of Radiology) dan NEMA (the National Electrical Manufacturers Association) menghasilkan DICOM (Digital Imaging and COMmunication) untuk standardisasi struktur format, parameter citra, pertukaran perintah antara unit, kompresi data citra, deskripsi obyek data. DICOM juga mendefinisikan persyaratan antar muka antara PACS dan HIS/RIS IPI (Image Processing and Interchange standard) adalah standard berorientasikan citra untuk pengolahan data dan komunikasi. Standardisasi ini adalah penting untuk memberikan garansi kompatibilitas dari subsistem. Hal ini melibatkan header dan format citra, protokol komunikasi, antarmuka peralatan, format penyimpan, elemen kontrol dan antarmuka pengguna. Subsistem PACS mungkin berasal dari supplier yang berbeda.
Subsistem-subsistem ini dapat merupakan modalitas pencitraan, pengolahan citra, workstation diagnostik, database, jaringan komunikasi, dan peralatan lainnya. Standard penting yang dikembangkan untuk RIS adalah OSI, DICOM, dan IPI. OSI terdiri dari tujuh lapis fungsi, dengan tiap lapis mendefinisikan aturan untuk protokol komunikasi. TCP/IP adalah yang paling umum.
(Dikumpulkan dari berbagai sumber)

blogE cah_0353

Minggu, 28 Maret 2010

Membuat Aplikasi Login sederhana menggunakan Variabel di PHP

Jumat, 05 Maret 2010

Aplikasi kalkulator sederhana menggunakan JavaScript

Sabtu, 27 Februari 2010

Desain web memanfaatkan Cascading Style Sheet (CSS)

Sabtu, 20 Februari 2010

Pembutan template web memanfaatkan table

Selasa, 16 Juni 2009

Telemedisin Dalam Aplikasi Jaringan

Labels

blog friend's

Blog Archive

About Me

buku tamu