TUGAS PEMROGRAMAN MOBILE LANJUTAN

BAB IV

IMPLEMENTASI

4.1       Implementasi Sistem

Implementasi system adalah langkah- langkah atau prosedur- prosedur yang dilakukan dalam menyelesaikan suatu desain system yang telah di setujui, untuk menguji, menginstall, dan memulai system baru atau suatu proses system  untuk memperbaiki dan menggantikan system yang lama.

4.2       Tujuan Implementasi Sistem

Tujuan Implementasi system adalah sebagai berikut:

1. Menyelesaikan desain system yang baru.
2. Memastikan bahwa pengguna dapat mengoperasikan dengan mudah pada system yang baru sehingga mendapatkan suatu informasi yang baik dan jelas.
3. Memastikan bahwa system yang baru telah berjalan dengan baik dengan mengontrol dan melakukan instalasi yang baru secara benar.

4.3       Pengujian Sistem

Pengujian system pada perangkat PC ( Personal Computer ) dan perangkat mobile ( Mobile phone ) untuk mengetahui hasil dari berjalannya aplikasi data Rumah Sakit berbasis website dan mobile seperti yang ingin diharapkan, maka dapat dilakukan suatu pengujian system dengan menggunakan Mozilla Firefox sebagai browser.

Pengujian aplikasi data ini dapat dilakukan dengan menggunakan PC( Personal Computer ) atau Leptop, dalam pengujian ini kita akan melihat spesifikasi yang dibutuhkan pada perangkat PC dan Hp Android.

NO	PERANGKAT PERCOBAAN	SUKSES	TIDAK
			SUKSES
1	Operating Sistem
	Sistem Operasi Windows 7	OK
2	Browser
	Mozlla Firefox versi 34.0	OK
	Internet Xplorer versi 9.0	OK
	Google Chrome	OK
3	Android
	Blackberry Gemini	OK
	Oppo R-481	OK
	Samsung Galaxy S6	OK

4.4       Proses Pengujian Sistem

Proses pengujian system adalah suatu proses atau langkah- langkah untuk menguji suatu system dapat berjalan dengan baik dan mengetahui adanya kesalahan- kesalahan dalam berjalanya suatu system tersebut.

Langkah- langkah sebagai berikut :

1. Buka aplikasi browser Mozilla Firefox [Enter]
2. Kemudian muncul tampilan halaman Mozilla Firefox, pada address bar dan kita dapat menulis atau mengetikkan http://localhost/rumah_sakit [Enter]
3. Maka muncul Halaman utama Aplikasi Data Rumah Sakit di Kota Batam.

                                                          Gambar 4.1 Halaman Utama
4.5       Perancangan Antarmuka

Setelah halaman utama dapat dibuka dengan baik, maka penulis dapat mengetahui hasil dari pengujian system ini, bahwa system ini telah berhasil.

Perancangan antar muka yang dimaksud untuk menggambarkan pilihan masukan dari petugas atau pengguna berupa menu- menu kemudian di lakukan proses pemanggilan data yang tersedia dalam database server dan menjadikan keluaran (output). Perancangan tampilan input dan output sebagai berikut:

 

1. Halaman Beranda

Halaman awal atau utama ini berisikan menu- menu dari pengisian link- link yang berhubungan kehalaman input, data, pencarian dan tentang aplikasi yang dibuat.

 Gambar 4.2 Halaman Beranda

 2. Halaman Tampil Data Rumah Sakit

 

Gambar 4.3 Halaman Tampilan Data Rumah Sakit

 3. Halaman Tentang Pembuat Program Aplikasi

 

Gambar 4.4 Tentang About Program

         4. Halaman Tentang Hasil Cetak Data Dokter

 Gambar 4.5 Cetak Data Dokter

       5. Halaman Login Aplikasi

 Gambar 4.6 Login Aplikasi

   6. Halaman Logout Aplikasi

 Gambar 4.7 Logout Aplikasi

7. Halaman Daftar Data User Baru 

 Gambar 4.8 Daftar Data User

8. Halaman Status penginputan Berhasil

 Gambar 4.9 Data Status Berhasil 

AJAX PADA JQUERY MOBILE

AJAX PADA JQUERY MOBILE

Banyak sekali permintaan yang datang kepada penulis perihal bagaimana cara mudahnya menghasilkan fitur ajax dengan menggunakan jquery dan php. Ajax merupakan satu fitur yang digunakan oleh para developer, baik menambah data, menghapus, mengupdate, tanpa melakukan refresh page, atau redirect page.

Banyak cara juga untuk dapat menghasilkan ajax ini, ada develepor yang membuat engine sendiri, tentunya menggunakan standarisasi ajax, ada juga yang menggunakan javascript plugin, seperti jquery misalnya.

Di tutorial kali ini, penulis akan menjelaskan sedikit saja bagaimana menghasilkan fitur ajax menggunakan php dan jquery. Caranya sangat-sangat mudah sekali. Anda cukup mengikuti syntaxnya, dan memahami alurnya. Tapi sebelumnya terlebih dahulu Anda membaca tutorial saya sebelumnya tentang pengenalan jquery.

Setidaknya diperlukan paling tidak 3 buah file minimal, pertama adalah file yang digunakan untuk mengirimdata, kemudian file yang digunakan untuk menerima data ataupun memproses data, dan yang terakhir adalah jquery librarynya itu sendiri.

Oke disini saya memiliki file index.php yang berfungsi dalam mengirimkan data

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>

<html>

<head>

<title></title>

<meta name=”” content=””>

<script type=”text/javascript” src=”jquery-1.6.4.js”></script>

<script type=”text/javascript”>

$(document).ready(function(){

$(‘#ajaxTest’).submit(function(eve){

eve.preventDefault();

$.ajax({

url: “/function.php”,

type: “POST”,

dataType: “html”,

data: $(this).serialize(),

beforeSend: function(){

$(‘#waiting’).text(‘Mohon Tunggu Sebentar’).fadeIn(‘slow’);

},

success: function(html){

$(‘#waiting’).fadeOut(‘slow’);

$(‘#result’).text(html).fadeIn(‘slow’).fadeOut(‘slow’).fadeIn(‘slow’);

}

});

});

});?? ??? ?

</script>

</head>

<body>

<form method=”POST” id=”ajaxTest”>

<input type=”input” name=”ajaxInput” />

<input type=”submit” name=”ajaxBtn” value=”Test Button” />

</form>

<div id=”waiting”></div>

<div id=”result”></div>

</body>

</html>

selanjutnya adalah function.php yang digunakan dalam menerima dan memproses data berisi :

<?php

echo $_POST[‘ajaxInput’];

?>

dan file yang terakhir adalah file jquery itu sendiri saya menggunakan jquery versi 1.6.4.

Yang perlu disorot adalah jquery script yang ada dibagian headnya :

<script type=”text/javascript” src=”jquery-1.6.4.js”></script>

<script type=”text/javascript”>

$(document).ready(function(){

$(‘#ajaxTest’).submit(function(eve){

eve.preventDefault();

$.ajax({

url: “/function.php”,

type: “POST”,

dataType: “html”,

data: $(this).serialize(),

beforeSend: function(){

$(‘#waiting’).text(‘Mohon Tunggu Sebentar’).fadeIn(‘slow’);

},

success: function(html){

$(‘#waiting’).fadeOut(‘slow’);

$(‘#result’).text(html).fadeIn(‘slow’).fadeOut(‘slow’).fadeIn(‘slow’);

}

});

});

});?? ??? ?

</script>

jquery action selalu diawali dengan

$(document).ready(function(){

dan di akhiri dengan

});

kemudian baris selanjutnya adalah :

$(‘#ajaxTest’).submit(function(eve){

eve.preventDefault();

ini berarti submit form yang tadinya disubmit secara langsung ke action formnya alihkan dengan menggunakan jquery ajax, jadi ketika diklik maka tidak akan berpindah ke halaman action formnya. Yang ada malahan jquery yang mengambil alih ketika button submit di klik.

kemudian baris selanjutnya adalah :

$.ajax({

url: “/function.php”,

type: “POST”,

dataType: “html”,

data: $(this).serialize(),

url berisi halaman penerima data yang akan dikirim, kemudian type POST anda sudah tahu maknanya, dataType HTML kita lewat saja, dan yang terakhir adalah data:($this).serialize() artinya kirimkan data yang datanya itu diambil dari input-input yang ada dalam form.

sedangkan baris selanjutnya penulis yakin Anda sudah paham maknanya,

beforeSend: function(){

$(‘#waiting’).text(‘Mohon Tunggu Sebentar’).fadeIn(‘slow’);

},

success: function(html){

$(‘#waiting’).fadeOut(‘slow’);

$(‘#result’).text(html).fadeIn(‘slow’).fadeOut(‘slow’).fadeIn(‘slow’);

}

});

M.Ropianto, M.Kom

NIDN.1028067804

Dosen Teknik Informatika

STT IBNU SINA BATAM

Jl. Teuku Umar - Lubuk Baja - Batam

T : 0778-425391,  F : 0778-458394

Website : stt-ibnusina.ac.id

TUGAS TEORI PEMROGRAMAN WEB

TEORI PEMROGRAMAN WEB

Pertemuan 1 & 2

Disini saya akan lampirkan tugas – tugas saya di kampus dan ini adalah tugas 1 & 2 saya.

Yang pertama buat las nama file Pertemuan 1 & 2

<!DOCTYPE html>
<html>
<head>
<style>
#header {
background-image: url(images/galerycity1.jpg);
color:red; text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:green;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section {
background-color:#369;
height:290px;
width:1203px;
float:left;
padding:10px;

}
#footer {
background-image: url(images/abu.jpg);
color:black;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
________________________________________
<body>

City Gallery

London

Paris

Tokyo

<?php
$page = (isset($_GET[‘page’]))? $_GET[‘page’] : “main”;
switch ($page) {
case ‘Paris’ : include “paris.php”; break;
case ‘Tokyo’ : include “tokyo.php”; break;
}
?>

London

London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.

Copyright © W3Schools.com

</body>
</html>

PERTEMUAN 3 & 4

Berikut adalah hasil tugas 3 & 4 yang telah di selesaikan
Pertama kita akan membuat file css. simpan dengan nama style.css
#image
{
background-image:url(“abu.jpg”);
padding-left:100ps;
height:150px;
}
#header {
background-color:#98bf21;
color:white;
text-align:center;
padding:5px;
padding-left:150px;
}
#nav {
line-height:20px;
height:730px;
width:200px;
float:left;
padding-top:5px;
}
#kanan {
line-height:30px;
height:300px;
width:200px;
float:right;
padding-top:5px;
}
#section {
width:350px;
float:left;
padding:50px;
}
#footer {
background-color:#4c5f10;
color:white;
text-align:center;
padding:5px;
clear:both;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a:link, a:visited {
display: block;
width: 200px;
font-weight: bold;
color: #FFFFFF;
background-color: #98bf21;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background-color: #7A991A;
}
#garis {
width: 200px;
float: left;
background-color: #4c5f10;
text-transform: uppercase;
}

Setelah itu, lalu kita membuat file dengan nama nav.html
<!DOCTYPE html>
<html>
<head><link rel=”stylesheet” type=”text/css” href=”style.css”></head>
<body>

 li><a href=”nav.html”>Home</a></lidingnya)

·         Home

·         News

·         Contact

·         About

Biodata

<img src=”012.jpg” width=”200px” height=”200px”>
<p>
Nama : Ruly Bintama Sakti<br/>
Pekerjaan : Mahasiswa<br/>
Negara : INDONESIA<br/>
Alamat : Permata Bandara C1 No 12B<br/>
Hoby : Futsal<br/> </p>
<hr>
<p align=”justify”>
ordinary kid with an extraordinary dreams
</p>
</div>
li><a href=”nav.html”>Menu/a></li> (contoh codingnya)

·         Menu 5

·         Menu 6

·         Menu 7

·         Menu 8

LONDON

London is the capital and most populous city of England and the United Kingdom.
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
London’s ancient core, the City of London, largely retains its 1.12-square-mile (2.9 km2)
medieval boundaries and in 2011 had a resident population of 7,375,
making it the smallest city in England. Since at least the 19th century,
the term London has also referred to the metropolis developed around this core.
The bulk of this conurbation forms Greater London,a region of England governed by the Mayor of London and the London Assembly.The conurbation also covers two English counties, the City of London and the county of Greater London,though historically it was split between the City, Middlesex, Essex, Surrey, Kent and Hertfordshire.

Copyright © W3Schools.com

</body>
</html>

Untuk gambarnya, bisa kita rubah dengan yang kita mau.

PERTEMUAN 5 & 6

(File Connection)

<?php
// Algoritma dan Pemrograman WEB, By.Ruly Bintama Sakti, 2015
// Teknik Informatika – STT Ibnu Sina Batam
// Set up koneksi kedatabase sesuai dengan user id dan password aplikasi
define(MYSQL_HOST, ‘localhost’);
define(MYSQL_USER, ‘root’);
define(MYSQL_PASS, ‘1234’);
define(MYSQL_DB, ‘db_pweb’);
// If we fail to connect, we cant keep going, so we exit
$db = mysql_connect(MYSQL_HOST, MYSQL_USER, MYSQL_PASS);
//$db=mysql_select_db(“csci”) or die(mysql_error());
if (!$db)
{
die(‘<br />Tidak Terhubung KeDatabase “‘ . MYSQL_HOST . ‘”.’);
}
else
{
//echo ‘Connected to MySQL server ‘ . MYSQL_HOST . ‘ as user ‘ . MYSQL_USER .
‘<br/>’;
mysql_select_db(MYSQL_DB);
}
// Calls to MySQL functions go here…
?>

simpan dengan nama file koneksi.php

(File NAV)

<!DOCTYPE html>
<html>
<head><link rel=”stylesheet” type=”text/css” href=”file:///C|/AppServ/www/style.css”></head>
<body>

·         Home

·         News

·         Contact

·         About

Biodata

<img src=”file:///C|/AppServ/www/012.jpg” width=”200px” height=”200px”>
<p>
Nama : Ruly Bintama Sakti<br/>
Pekerjaan : Mahasiswa<br/>
Negara : INDONESIA<br/>
Alamat : Permata Bandara C1 no 12B<br/>
Hoby : Futsal<br/> </p>
<hr>
<p align=”justify”>
Ordinary kid with an extra ordinary dreams </p>
</div>

<li><a href=”file:///C|/AppServ/www/search.php”>Search STUDENT</a></li> (contoh codingnya)

Mahasiswa

Copyright © W3Schools.com

</body>
</html>

simpan dengan nama nav.php

(File CSS)

#image
{
background-image:url(“abu.jpg”);
padding-left:100ps;
height:120px;
}
#header {
background-color:#98bf21;
color:white;
text-align:center;
padding:5px;
padding-left:150px;
}
#nav {
line-height:20px;
height:730px;
width:200px;
float:left;
padding-top:5px;
}
#kanan {
line-height:30px;
height:300px;
width:200px;
float:right;
padding-top:5px;
}
#section {
width:350px;
float:left;
padding:50px;
}
#footer {
background-color:#4c5f10;
color:white;
text-align:center;
padding:5px;
clear:both;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a:link, a:visited {
display: block;
width: 200px;
font-weight: bold;
color: #FFFFFF;
background-color: #98bf21;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background-color: #7A991A;
}
#garis {
width: 200px;
float: left;
background-color: #4c5f10;
text-transform: uppercase;
}

simpan dengan nama style.cs