PERANCANGAN SISTEM INFORMASI TIPS DAN SARAN
KELUARGA SEHAT BEBRBASIS WEB
TUGAS AKHIR
ALI SYARIATI
112406115
a
PROGRAM STUDI D3 TEKNIK INFORMATIKA
DEPARTEMEN MATEMATIKA
FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM
UNIVERSITAS SUMATERA UTARA
PERANCANGAN SISTEM INFORMASI TIPS DAN SARAN
KELUARGA SEHAT BEBRBASIS WEB
TUGAS AKHIR
Diajukan untuk melengkapi tugas dan memenuhi syarat memperoleh
gelar Ahli Madya
ALI SYARIATI
112406115
PROGRAM STUDI D3 TEKNIK INFORMATIKA
DEPARTEMEN MATEMATIKA
FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM
UNIVERSITAS SUMATERA UTARA
PERSETUJUAN
Judul : PERANCANGAN SISTEM INFORMASI TIPS
DAN SARAN KELUARGA SEHAT BERBASIS WEB
Kategori : TUGAS AKHIR Nama : ALI SYARIATI Nomor Induk Mahasiswa : 112406115
Program Studi : DIPLOMA 3TEKNIK INFORMATIKA Departemen : MATEMATIKA
Fakultas : MATEMATIKA DAN ILMU PENGETAHUAN ALAM (MIPA)
UNIVERSITAS SUMATERA UTARA
Disetujui di Medan, juni 2014
Diketahui/ Disetujui Oleh
Program Studi D3 Teknik Informatika
Ketua, Pembimbing,
Dr. Elly Rosmaini, M.Si Drs. Rosman Siregar M,Si
PERNYATAAN
PERANCANGAN FORUM DISKUSI PEMROGRAMAN BAHASA C BERBASIS WEB
TUGAS AKHIR
Saya mengakui bahwa tugas akhir ini adalah hasil kerja saya sendiri, kecuali beberapa kutipan dan ringkasan yang masing-masing disebutkan sumbernya.
Medan, Juni 2014
PENGHARGAAN
Puji dan syukur penulis panjatkan kepada Allah SWT yang Maha Pemurah dan Maha Penyayang, dengan limpahan rahmat dan hidayah-Nya Penulis dapat menyelesaikan penyusuanan tugas akhir ini dengan judul Perancangan Sistem Informasi Tips dan Saran Keluarga Sehat Berbasis Web.
Terimakasih penulis sampaikan kepada Drs. Rosman Siregar, M.Si selaku
pembimbing yang telah meluangkan waktunya selama penyusunan tugas akhir ini.
Terimakasih kepada Prof. Drs. Tulus, M.Si, dan Syahriol Sitorus, S.S.I, M.I.T
selaku Ketua Departemen dan Sekretaris Departemen Matematika FMIPA USU,
Ibu Dra. Elly Rosmaini, M.Si, selaku ketua Prodi D3 Teknik Informatika, Dekan
dan Pembantu Dekan FMIPA USU, seluruh Staff dn Dosen Matematika FMIPA
USU, pegawai FMIPA USU dan rekan-rekan kuliah. Akhirnya tidak terlupakan
kepada Ibunda tercinta Kurniasih, Ayahanda Agus, dan keluarga yang selama ini
memberikan bantuan dan dorongan yang diperlukan. Semoga Allah SWT akan
ABSTRAK
DAFTAR ISI
Halaman
Persetujuan ii
Pernyataan iii
Penghargaan iv
Abstrak vi
Daftar Isi vii
Daftar Tabel ix
Daftar Gambar x
BAB 1 PENDAHULUAN 1
1.1 Latar Belakang 1
1.2 Rumusan Masalah 3
1.3 Batasan Masalah 4
1.4 Tujuan Penelitian 4
1.5 Metode Penelitian 4
1.6 Sistematika Penulisan 6
BAB 2 LANDASAN TEORI 8
2.1 Pengertian Sistem Informasi 8 2.2 Pengertian Kesehatan 8
2.3 Data 10
2.4 Pengertian Komputer 11 2.5 Pengertian Internet 12 2.6 PHP (Personal Home Page) 12
2.6.1 Sejarah PHP 13
2.6.2 Konsep dasar PHP 13
2.7 MySQL 16
2.8 Fungsi PHP dan MySQL 17 2.9 Hypertext Marup Language 18 2.10 CSS (Cascading Style Sheet) 21 2.11 Pengenalan Macromedia Dreamweaver 8 22
BAB 3 PERANCANGAN SISTEM 23
3.1 Perancangan Sistem 23
3.2 Data Flow Diagram 23
3.3 Perancangan Basis Data 26
3.4 Flowchart 30
3.4.1 Flowchart pencarian 32 3.4.2 Flowchart login administrator 33 3.4.3 Flowchart halaman utama admin 34
4.1 Pengertian Implementasi Sistem 35 4.2 Tujuan Implementasi Sistem 35
4.3 Komponen Sistem 36
4.3.1 Hardware 36
4.3.2 Software 37
4.3.3 Brainware 37
4.4 Tampilan Akhir Website 38 4.4.1 Halaman index.php 38 4.4.2 Halaman home.php 40
BAB 5 KESIMPULAN DAN SARAN 41
5.1 Kesimpulan 41
5.2 Saran 42
Daftar Pustaka 43
DAFTAR TABEL
Nomor Judul Halaman
Tabel
3.1 Simbol-simbol DFD 25
3.2 Login admin 26
3.3 Artikel Obat Herbal 26
3.4 Artikel jenis penyakit 26
3.5 Artikel tips sehat 28
3.6 Home 28
DAFTAR GAMBAR
Nomor Judul Halaman
Gambar
3.1 DFD Level konteks 26
3.2 Flowchart pencarian 32
3.3 Flowchart login Administrator 33 3.4 Flowchart Halaman Utama Admin 34 3.5 Halaman index.php untuk user 38 3.6 Halaman index.php untuk admin 39
3.7 Halaman home.php 40
ABSTRAK
BAB 1
PENDAHULUAN
1.1Latar Belakang
Perkembangan teknologi informasi yang sedemikian cepatnya telah membawa
dunia memasuki era baru yang lebih cepat dari yang pernah dibayangkan
sebelumnya. Perkembangan teknologi ini membawa perubahan dalam berbagai
bidang kehidupan manusia. Salah satu hasil dari kemajuan teknologi adalah
dihasilkannya komputer sebagai alat bantu manusia dalam melakukan pekerjaan
dan juga internet sebagai sarana komunikasi penghubung yang digunakan melalui
komputer. Janner Simarmata (2009)
Komputer berasal dari bahasa Inggris yaitu, computer yang berasal dari kata
compute yang artinya menghitung. Jadi secara bahasa, komputer adalah suatu alat
pemeroses data yang dapat melakukan perhitungan besar secara cepat , termasuk
aritmatika dan operasi logika, tanpa campur tangan manusia. William M. Fuori
Selain komputer, internet merupakan salah satu hasil dari kemajuan
teknologi. Internet menjadi dasar perubahan yang terjadi dalam bidang ekonomi,
sosial, dan budaya. Pada bidang ekonomi, hal yang berhubungan dengan transaksi
dan administrasi menjadi semakin mudah dan efisien. Pada bidang sosial, internet
mengubah pola hubungan sosial antar individu yang menghilangkan jarak yang
begitu jauh. Pada bidang budaya, mudahnya terjadi transformasi budaya antar
Negara yang harus disikapi dengan cermat pengaruhnya. J. Simarmata (2009)
Sistem informasi merupakan suatu sistem yang menerima masukan data dan
instruksi, mengolah data tersebut sesuai dengan instruksi dan mengeluarkan
hasilnya. Gordon B. Davis (1991: 91)
Sistem informasi merupakan sarana alternatif untuk membantu memberikan
informasi bagi suatu lembaga/perusahaan ataupun perorangan. Salah satunya
adalah website, merupakan sarana promosi yang memberikan kemudahan bagi
siapa saja yang ingin mengaksesnya kapanpun dan dimanapun.
Pada saat ini, masyarakat dihadapkan pada bermacam pola kehidupan yang
kurang sehat sehingga masyarakat dapat sakit dengan mudah. Tidak hanya orang
dewasa yang dapat sakit malainkan juga pada anak-anak, tindakan yang tidak tepat
apabila anak terkena sakit dapat barakibat fatal yang bahkan dapat menyebabkan
kematian. Ini disebabkan minimnya pengetahuan masyarakat tentang bagaimana
pola hidup sehat serta tindakan yang tepat apabila seseorang terkena sakit.
membantu masyarakat untuk mendalami pengetahuan mereka tentang kesehatan.
Sehingga untuk mengatasi permasalahan di atas penulis akan membuat tugas akhir
dengan judul : “Tips dan Saran Keluarga Sehat Berbasis Web”.
1.2 Rumusan Masalah
Sesuai dengan latar belakang masalah di atas dapat di rumuskan menjadi beberapa
masalah sebagai berikut :
1. Sejauh mana sistem informasi dalam bidang keshatan terkhususnya pada cara hidup sehat dirancang semenarik mungkin agar masyarakat lebih tertarik tentang kesehatan?
1.3 Batasan Masalah
Dalam perancangan web ini dilakukan beberapa batasan sebagai berikut :
1. Tips kesehatan keluarga.
2. Penyakit yang biasa di alami masyarakat.
3. Cara tepat penanganan bila terkena serang penyakit.
4. Informasi tentang obat-obat herbal.
1.4Tujuan Penelitian
Dalam penyusunan tugas akhir ini tujuan yang hendak dicapai dalam website ini
adalah:
1. Merancang sebuah website untuk membantu masyarakat mendapatkan informasi tentang kesehatan.
2. Merancang website yang dapat dikembangkan.
1.5Metode Penelitian
Metode Penelitian adalah langkah-langkah sistematik yang ini digunakan untuk
mengerjakan atau menyelesaikan suatu masalah. Metode penelitian digunakan
sebagai pedoman dalam melaksanakan penelitian agar hasil yang dicapai tidak
Metodologi penelitian yang digunakan penulis untuk menyelesaikan
permasalah yang terjadi di atas adalah :
1. Studi Literatur
Pengumpulan data yang erat kaitannya dengan permasalahan dengan cara
membaca buku-buku, makalah dan membaca bahan-bahan sumber lainnya di
perpustakaan USU.
2. Analisis Sistem
Melakukan analisis sistem terhadap masalah yang ada mengenai website bisa
dijalankan dengan mudah dan bisa dimanfaatkan oleh pengguna pada komputer
dengan fasilitas internet.
3. Desain Sistem
Pada tahap ini dilakukan perancangan program, membuat desain website
tersebut.
4. Uji Coba
Melakukan pengujian program, mengangani dan memperbaiki kesalahan yang
5. Dokumentasi
Pada tahap ini dilakukan pembuatan laporan mulai dari studi literatur sampai
dengan implementasi, serta penarikan kesimpulan dan saran. Pada tahap ini juga
ada dicatat apa saja yang menjadi kelemahan dan kelebihan dalam website ini
1.6Sistematika Penulisan
Adapun sistematika penulisan laporan Tugas Akhir ini adalah sebagai berikut :
BAB 1 : PENDAHULUAN
Bab ini merupakan bagian yang berisi mengenai latar belakang, rumusan masalah, batasan masalah, tujuan penelitian, metode
penelitian serta sistematika penulisan.
BAB 2 : LANDASAN TEORI
Bab ini merupakan uraian teoritis mengenai pengertian-pengertian dan mengenai bahasa pemrograman yang digunakan.
BAB 3 : PERANCANGAN SISTEM
Bab ini berisi rancangan aplikasi yang akan dibentuk, pengertian perancangan sistem, data flow diagram, flowchart, persiapan
database, file yang digunakan serta algoritma terbentuknya
BAB 4 : IMPLEMENTASI SISTEM
Bab ini berisi uraian pengertian dan implementasi sistem, spesifikasi aplikasi, instalasi PHP, MySQL dan Apache, Pengujian
pada browser dan tampilan halaman aplikasi web yang dirancang.
BAB 5 : KESIMPULAN DAN SARAN
BAB 2
LANDASAN TEORI
2.1Pengertian Sistem Informasi
Sistem informasi merupakan suatu sistem yang menerima masukan data dan
instruksi, mengolah data tersebut sesuai dengan instruksi dan mengeluarkan
hasilnya. Gordon B. Davis (1991: 91)
Sistem informasi merupakan sarana alternatif untuk membantu memberikan
informasi bagi suatu lembaga/perusahaan ataupun perorangan. Salah satunya
adalah website, merupakan sarana promosi yang memberikan kemudahan bagi
siapa saja yang ingin mengaksesnya kapanpun dan dimanapun.
2.2Pengertian Kesehatan
Kesehatanmerupakan bagian terpenting dalam kehidupan yang mencirikan kondisi
baik dan sejahtera dalam menjalani kehidupan, keadaan kesehatan seseorang
hidup produktif baik secara sosial maupun ekonomi. Menurut undang-undang di
Indonesiapengertian kesehatanyaitu keadaan sejahtera dari badan, jiwa, dan sosial
yang memungkinkan setiap orang hidup produktif secara sosial dan ekonomis.
Pentingnya kesehatan untuk setiap orang agar dapat memberdayakan segala
sesuatu baik yang dimilikinya maupun lingkungannya secara maksimal, kesehatan
sangat berhubungan erat dengan hidup sehat. Sehingga bisa dijabarkan pengertian
hidup sehat adalah memiliki kesehatan dalam hidup dengan tanpa ada masalah
gangguan pada kehidupannya baik bersifat fisik yang berupa penyakit pada tubuh
maupun non fisik yang berhubungan dengan kondisi jiwa, hati dan pikiran
seseorang dalam hidup baik secara individual maupun sosial.
Bisa dikatakan hidup sehat adalah keadaan terbaik kondisi kesehatan baik
jasmani maupun rohani seseorang yang berdampak pada kehidupan yang bahagia
dan sejahtera.
Seseorang akan dapat beraktivitas secara maksimal dan juga mampu
merasakan nikmatnya hidup bila dalam kondisi tubuh sehat, untuk itulah sangat
begitu pentingnya kesehatan bagi kehidupan setiap orang, maka perlu sekali
untukmenjaga daya tahan tubuhuntuk tetap sehat dan segar bugar.
Biasanya yang sering terjadi seseorang merasa pentingnya sebuah arti
kesehatan bila seseorang tersebut sedang mengalami gangguan kesehatan baik
pentingnya arti hidup sehat dan menjaga kesehatan pada kondisi yang stabil setiap
waktunya.
Kesehatan dan hidup sehat berhubungan dengan kesejahteraan dan
kebahagiannya seseorang, bisa diambil contoh seandainya anda memiliki harta
yang banyak dan keluarga juga lengkap namun bila anda sedang tidak sehat alias
sakit maka anda secara otomatis kurang bisa merasakan bahagianya dalam hidup
sehingga kesejahteraan tidak sepenuhnya terjapai. Maka terkadang kesehatan
jasmani dan rohani saling terkait, dari contoh yang telah disebutkan berawal
terganggunya kesehatan jasmani dapat mempengaruhi rohani dengan terganggunya
perasaan tidak bahagia, untuk itulah harus bisa mengontrol dan mampu menyikapi
hidup dengan cara terbaik. (www.hidupsehat.web.id)
2.3Data
Data berasal dari bahasa Latin yaitu datum yang berarti fakta, kenyataan, kejadian
atau peristiwa. Jadi data atau fakta adalah kenyataan dari sesuatu kejadian atau
peristiwa. Data dapat didefinisikan yaitu kumpulan fakta-fakta yang berupa fisik
dan bukan fisik, kejadian-kejadian dan prosedur yang belum diolah manusia atau
peralatan yang digunakan oleh manusia.
Kegunaan dari data adalah sebagai bahan dasar yang objektif di dalam
merupakan keterangan yang masih mentah (belum diolah). Agar dapat
dipergunakan, maka data tersebut harus diolah terlebih dahulu ke dalam bentuk
informasi yang sesuai dengan keperluan yang dibutuhkan. Kenneth C. Laudon dan
Jane P. Laudon (2008)
2.4Pengertian Komputer
Istilah komputer (computer) diambil dari bahasa Latin computare yang berarti
menghitung (to compute). Dengan demikian komputer dapat diartikan sebagai alat
hitung. Komputer bukan sekedar mesin hitung tetapi komputer mempunyai
kemampuan yang dapat membantu manusia dalam menyelesaikan pekerjaan.
Komputer dapat melakukan berbagai macam pekerjaan sesuai dengan program
yang diberikan. Program adalah sekumpulan instruksi atau perintah terperinci yang
sudah dipersiapkan agar komputer dapat melakukan fungsinya dengan cara yang
sudah ditentukan. Komputer adalah alat elektronik yang mampu melakukan
beberapa pekerjaan diantaranya:
a. Menerima masukan data
b. Memproses masukan sesuai dengan programnya.
c. Menyimpan perintah-perintah dan hasil dari pengolahan.
2.5Pengertian Internet
Internet (Interconnected Network) merupakan jaringan komputer yang terdiri dari
ribuan jaringan komputer independen yang dihubungkan antara satu dengan yang
lainnya. Secara etimologis, internet berasal dari bahasa Inggris yakni Inter yang
berarti antar dan Net yang berarti jaringan sehingga Internet dapat diartikan
hubungan antar jaringan. MADCOMS (2008)
2.6PHP (Personal Home Page)
PHP adalah singkatan dari Personal Home Page yang merupakan bahasa standar
yang digunakan dalam dunia website. PHP adalah bahasa pemrograman yang
berbentuk script yang diletakkan didalam web server. Ada beberapa pengertian
tentang PHP, akan tetapi PHP dapat diartikan sebagai Hypertext Preeprocessor. Ini
merupakan bahasa yang hanya dapat berjalan pada server yang hasilnya dapat
ditampilkan pada klien. Interpreter PHP dalam mengeksekusi kode PHP pada sisi
server disebut serverside, berbeda dengan mesin maya Java yang mengeksekusi
2.6.1 Sejarah PHP
PHP pertama kali diciptakan oleh Rasmus Lerdorf pada tahun 1994. Awalnya, PHP
digunakan untuk mencatat jumlah serta untuk mengetahui siapa saja pengunjung
pada homepage-nya. Rasmus lerdorf adalah seorang pendukung open source. Oleh
karena itu, ia mengeluarkan Personal Home Page Tools versi 1.0 secara gratis,
kemudian
menambah kemampuan PHP 1.0 dan meluncurkan PHP 2.0.
Pada tahun 1996, PHP telah banyak digunakan dalam website didunia.
Sebuah kelompok pengembang software yang terdiri dari Rasmus, Zeew Zuraski,
Andi Gutman, Stig Bakken, Shane Caraveo dan Jim Winstead bekerjasama untuk
menyempurnakan PHP 2.0. Akhirnya, pada tahun 1998, PHP 3.0 diluncurkan.
Penyempurnaan terus dilakukan sehingga pada tahun 2000 diluncurkan PHP 4.0.
Tidak berhenti sampai disitu, kemampuan PHP terus ditambah dan versi terbaru
yang dikeluarkan adalah PHP 5.0.x. Kasiman Peranginangin, 2009
2.6.2 Konsep dasar PHP
Kode PHP diawali dengan tanda lebih kecil (<) dan diakhiri dengan tanda lebih
besar (>). Ada beberapa cara untuk menuliskan skrip PHP yaitu:
…..skrip PHP
?>
2. <?php
…..skrip PHP
?>
3. <script language=”PHP”>
…..skrip PHP
</script>
4. <%
…..skrip PHP
%>
Pemisah antar instruksi adalah tanda titik koma (;) dan untuk membuat atau
menambahkan komentar/standar penulisan adalah: /* komentar */, // komentar, #
komentar. Untuk menuliskan skrip PHP ada dua cara yang sering digunakan yaitu
Embedded Script dan Non-Embedded Script.
a. Embedded Script adalah script PHP yang disisipkan diantara tag dokumen html. Contoh penulisan dari Embedded Script:
<html>
<body>
<?pho
echo “Hallo, selamat menggunakan PHP”;
?>
</body>
</html>
b. Non-Embedded Script adalah skrip PHP murni, tag html yang digunakan untuk membuat dokumen merupakan bagian dari skrip PHP. Contoh penulisan dari
Non-Embedded Script :
<?php
echo “<html>”:
echo “<head>”:
echo “<title>Mengenal PHP</title>”:
echo “</head>”:
echo “<body>”:
echo “<p>PHP itu mudah</p>”:
echo “</body>”:
echo “<html>”:
?>
Script yang dibuat dengan PHP disimpan dengan nama file dan diikuti dengan
maka file PHP disimpan di folder htdocs di web server. Sama halnya dengan
penaman dokumen html, pemberian nama dokumen yang sama tetapi dituliskan
dengan case yang berbeda akan dianggap sebagai dokumen yang berbeda. Skrip
dapat disisipkan di bagian manapun dalam dokumen html, begitu pula sebaiknya
skrip HTML dapat diletakkan di antara skrip PHP. Kasiman Peranginangin, 2009
2.7MySQL
MySQL merupakan software sistem manajemen database (Database Management
System – DBMS) yang sangat popular di kalangan pemrogram web, terutama di
lingkungan Linux dengan menggunakan skrip dan Ped.
Fungsi MySQL dapat dikatakan sebagai interpreter query, karena setiap kita
menggunakan query SQL (perintah SQL) kita harus meletakkannya di dalam fungsi
ini. Dengan kata lain, SQL tidak dapat dijadikan tanpa adanya fungsi MySQL. MySQL
termasuk jenis relational database management system (RDBMS). Sehingga istilah
seperti tabel, baris dan kolom tetap digunakan dalam MySQL. Pada MySQL, sebuah
database mengandung beberapa tabel, tabel terdiri dari sejumlah baris dan kolom.
SQL merupakan kependekan Structured Query language. SQL digunakan
untuk berkomunikasi dengan sebuah database. SQL adalah bahasa yang meliputi
perintah-perintah untuk menyimpan, menerima, memelihara, dan mengatur
akses-akses ke basis data serta digunakan untuk memanipulasi dan menampilkan data dari
2.8Fungsi PHP dan MySQL
Fungsi PHP untuk mengakses MySQL yang biasa digunakan diantaranya adalah :
a. mysql_connect(), fungsi mysql_connect adalah untuk menghubungkan PHP dengan database MySQL.
Format fungsinya adalah : mysql_connect(string hostname, string username, string password);
b. mysql_select_db, setelah terhubung ke database MySQL dengan menggunakan mysql_connect, langkah selanjutnya adalah memilihi
database yang akan digunakan. Fungsi mysql_connect_db digunakan untuk memilih database. Format fungsinya adalah: mysql_select_db(string database, koneksi);
c. mysql_query, dalam database MySQL, perintah untuk melakukan trnasaksi ialah perintah SQL. Sebutan untuk mengirim perintah SQL dinamakan
d. mysql_num_rows, kegunaan dari fungsi ini adalah untuk menghitung jumlah baris yang dikenai oleh proses SQL. Format penulisannya adalah: int mysql_num_rows(int result);
e. mysql_fetch-array, fungsi ini digunakan untuk menampilkan data. Dalam fungsi ini, hasil query ditampung dalam bentuk array. Format fungsinya adalah: Array mysql_fetch_array(int result, int [result_type]);
(Kasiman Peranginangin, 2009).
2.9 Hypertext Markup Language (HTML)
Hypertext Markup Language merupakan kepanjangan dari kata HTML. HTML
adalah script dimana kita bisa menampilkan informasi dan daya kreasi kita lewat
intenet. HTML juga merupakan file teks murni yang dapat dibuat dengan editor teks
sembarang yaitu yang dikenal sebagai web page atau dokumen yang disajikan dalam
web browser. Dokumen ini umumnya berisi informasi atau interface aplikasi didalam
internet.
HTML sendiri adalah suatu dokumen teks biasa yang mudah dimengerti
dibanding bahasa pemrograman lainnya, dan karena bentuknya itu maka HTML dapat
dibaca oleh berbagai platform seperti : windows, Linux, Macintosh. Kata Markup
Language pada HTML menunjukkan fasilitas yang berupa tanda tertentu dalam script
HTML sehingga kita bisa mengatur judul, garis, tabel, gambar dan lain-lain dengan
Simbol penandaan yang digunakan dalam HTML ditandai dengan tanda
lebih kecil (<) dan tanda lebih besar (>) yang disebut dengan tag. Misalnya hendak
menampilkan teks yang tercetak miring, maka mark up yang digunakan adalah
sebagai berikut :
<i> Teks ini akan dicetak miring </i>
(MADCOMS, 2008)
HTML itu sendiri terdiri dari beberapa bagian yang fungsinya sebagai penanda
suatu kelompok perintah tertentu, misalnya kelompok perintah form yang ditandai
dengan kode <form>, judul dengan <title> dan sebagainya. Untuk lebih lanjut
mengenai bagian-bagian HTML perhatikan skema dibawah ini :
<html>
<head>
<title> Judul Halaman </title>
</head>
<body>
…isi dari halaman web…
</body>
</html>
1. Dokumen HTML selalu diawali dengan tand tag pembuka <html> dan diakhiri dengan tanda tag penutup </html>.
2. Pada elemen head <head></head>, dapat kita sisipkan kode untuk menuliskan keterangan tentang dokumen HTML. Atau dapat juga kita sisipkan scripts
pemrograman web seperti Javascript, VBscript atau CSS untuk menambah daya tarik pada situs yang kita buat agar lebih menarik dan dinamis.
3. Elemen-elemen <body></body> berisi tag-tag untuk isi atau layout tampilan situs kita, seperti : <font></font>, <table></table>, <form></form>.
Jadi jelas bahwa elemen adalah suatu bagian yang besar yang terdiri dari
kodekode tag tersebut. Sedangkan tag hanyalah merupakan bagian dari elemen. Tag
adalah kode-kode yang digunakan untuk mengatur dokumen HTML. Secara garis
besar bentuk umum tag adalah sebagai berikut : <tag-awal>TEKS<tag-akhir>.
Namun ada juga tag yang tidak perlu ada tag penutup seperti <br>, <hr>, <img>
2.10 CSS (Cascading Style Sheet)
CSS merupakan kependekan Cascading Style Sheet yang berfungsi untuk mengatur
tampilan dengan kemampuan jauh lebih baik dari tag maupun atribut standar
HTML. CSS sebenarnya adalah suatu kumpulan atribut untuk fungsi format
tampilan dan dapat digunakan untuk mengontrol tampilan banyak dokumen secara
bersamaan. Keuntungan menggunakan CSS yaitu jika ingin mengubah dokumen,
maka tidak perlu mengubah satu persatu.
Penggunaan CSS ada dua cara yaitu dengan menyispkan kode CSS
langsung dalam kode HTML atau simpan menjadi file tersendiri berekstensi *.css.
Dengan meyimpan sebagai file tersendiri akan memudahkan untuk mengontrol
tampilan dalam banyak dokumen secara langsung. CSS mendapat dukungan penuh
pada browser versi 4 dan pada versi sebelumnya, hanya Internet Explorer yang
masih mampu mengenal CSS. Tampilan CSS dapat berbeda jika ditampilkan pada
menu browser yang berbeda. (Diar Puji Oktavian, 2010)
2.11 Pengenalan Macromedia Dreamweaver 8
Dreamweaver 8 merupakan salah satu produk software yang dikeluarkan dari
perusahaan Macromedia, Inc. Software ini bergerak dalam bidang perancangan
web. Sekelompok software perancang web diantaranya Flash, Dreamweaver,
membuat software pembangun website yang mampu melakukan banyak hal dan
memiliki banyak keunggulan.
Dreamweaver 8 adalah suatu bentuk software editor web yang dibuat oleh
Macromedia. Dengan software ini, seorang programmer web dapat dengan mudah
membuat tampilan websitenya. Dreamweaver 8 merupakan editor yang komplit dan
dapat digunakan untuk membuat animasi sederhana dalam bentuk halaman. Dengan
adanya software ini kita tidak direpotkan untuk menuliskan skrip-skrip format
BAB 3
PERANCANGAN SISTEM
3.1Perancangan Sistem
Tujuan dari perancangan sistem adalah untuk memenuhi kebutuhan user (pemakai)
mengenai gambaran yang jelas tentang perancangan sistem yang akan dibuat serta
diimplementasikan. Perancangan sistem adalah suatu upaya untuk membuat suatu
sistem baru atau memperbaiki sistem yang lama secara keseluruhan atau
memperbaiki sistem yang telah ada. Desain sistem secara umum
mengidentifikasikan komponen-komponen sistem informasi yang akan didesain
secara terinci. Desain terinci dimaksudkan untuk pemogram komputer dan ahli
teknik lainnya yang akan mengimplementasikan sistem.
3.2Data Flow Diagram
Data Flow Diagram (DFD) merupakan alat bantu yang dapat digunakan untuk
menggambarkan aliran data informasi dan transformasi (proses) dari data dimulai
Diagram yaitu:
Tabel 3.1 Simbol-simbol DFD
No Gambar Nama Fungsi
1 Kesatuan Luar
(Exsternal Entity)
Merupakan kesatuan luar di lingkungan luar sistem yang akan memberikan input atau menerima output dari sistem.
2 Proses
(Proses)
Kegiatan dari hasil suatu arus data yang masuk dalam proses untuk dihasilkan arus data yang akan keluar atau untuk mengubah input menjadi output.
3 Aliran Data
(Data Flow)
Data mengalir melalui sistem dimulai dengan sebagian input dan diubah menjadi output.
4
Penyimpanan Data
(Data Storage)
Berikut ini merupakan Data Diagram Flow dari rancangan Sistem Informasi
Tips Keluarga Sehat.
3.3Perancangan Basis Data
Basis data atau database merupakan kumpulan data yang saling berhubungan satu
dengan lainnya, tersimpan disimpanan luar komputer dan digunakan perangkat
lunak tertentu untuk memanipulasinya. Database merupakan salah satu komponen
yang penting dalam sistem informasi, karena berfungsi sebagai basis penyedia
User Admin
Online
1. Akses data kesehatan
1. Pengelolahan data
informasi bagi para pemakainya. Karena database merupakan kumpulan dari
beberapa file, dalam hal ini file-file tersebut dikelompokkan secara terstruktur
dalam beberapa tabel sesuai dengan informasi yang terkandung di dalamnya.
Berikut rancangan tabel yang digunakan dalam membangun aplikasi web ini:
Nama Field Tipe Lebar Penjelasan
username varchar 20 Username untuk admin
password varchar 20 Kata sandi untuk admin
Nama Field Tipe Lebar Penjelasan
Id int 10 Nomor unik judul
judul varchar 100 Judul dari artikel Obat Herbal
keterangan text Isi dari artikel
image varchar 100 Foto yang di tampilkan pada artikel
Tanggal date Tanggal pada artikel di upload
Tabel 3.2 Tabel Login Admin
Nama Field Tipe Lebar Penjelasan
Id int 10 Nomor unik judul
judul varchar 100 Judul dari artikel jenis penyakit
keterangan text Isi dari artikel
image varchar 100 Foto yang di tampilkan pada artikel
Tanggal date Tanggal pada artikel di upload
Nama Field Tipe Lebar Penjelasan
Id int 10 Nomor unik judul
judul varchar 100 Judul dari artikel Tips Sehat
keterangan text Isi dari artikel
Image varchar 100 Foto yang di tampilkan pada artikel
Tanggal date Tanggal pada artikel di upload
Nama Field Tipe Lebar Penjelasan
Id int 10 Nomor unik judul
nama varchar 100 Judul dari semua artikel
keterangan text Isi dari artikel
Image varchar 100 Foto yang di tampilkan pada artikel
Tanggal date Tanggal pada artikel
Tabel 3.4 Tabel Artikel Jenis Penyakit
Kategori varchar 15 Kategori dari artikel yaitu tips, obat dan penyakit
Nama Field Tipe Lebar Penjelasan
Id int 5 Id komentar
nama varchar 30 Nama pemberi komentar
email varchar 30 Email pemberi komentar
komentar text Isi Komentar
date datetime Tanggal pada komentar di upload
id_judul int 4 Id dimana tempat komentar tampil
url varchar 100 Lokasi tampil Komentar
Nama Field Tipe Lebar Penjelasan
Id int 5 Id komentar
nama varchar 30 Nama pemberi komentar
email varchar 30 Email pemberi komentar
komentar text Isi Komentar
date datetime Tanggal pada komentar di upload
id_judul int 4 Id dimana tempat komentar tampil
url varchar 100 Lokasi tampil Komentar
Nama Field Tipe Lebar Penjelasan
Id int 5 Id komentar
nama varchar 30 Nama pemberi komentar
email varchar 30 Email pemberi komentar
komentar text Isi Komentar
date datetime Tanggal pada komentar di upload
id_judul int 4 Id dimana tempat komentar tampil
url varchar 100 Lokasi tampil Komentar
Tabel 3.8 Tabel Komenar Halaman Penyakit
3.4Flowchart
Flowchart adalah sekumpulan simbol-simbol yang menunjukkan atau
menggambarkan rangkaian kegiatan-kegiatan program dari awal hingga akhir, jadi
flowchart juga digunakan untuk menggambarkan urutan langkah-langkah
pekerjaan disuatu algoritma. Penjelasan arti lambang-lambang flowchart dapat
didefenisikan seperti tabel berikut:
No Simbol Fungsi
1 Terminator,suatu program. untuk memulai dan mengakhiri
2
Process, suatu simbol yang menunjukkan setiap
pengolahan yang dilakukan oleh komputer.
3
Data, digunakan untuk memasukkan data maupun menunjukkan hasil dari suatu proses.
4
Decision, suatu kondisi yang akan menghasilkan beberapa kemungkinan jawaban atau pilihan.
5
Preparation, suatu simbol yang menyediakan
tempat-tempat pengolahan data dalam
storage.
6
Connector, merupakan simbol untuk masuk dan
kertas yang sama.
7
Off-Page Connector, merupakan simbol untuk masuk dan keluarnya suatu prosedur pada lembar kertas yang lain.
8
Arus atau flow, prosedur yang dapat dilakukan dari atas ke bawah, bawah ke atas, dari kiri ke kanan, atau dari kanan ke kiri.
9 Documentyang berbentuk informasi, merupakan simbol untuk data .
10
Predefined process, digunakan untuk
menyatakan sekumpulan langkah proses yang ditulis sebagai prosedur.
11 Display,device, seperti monitor. untuk output yang ditujukan suatu
3.4.1 Flowchart pencarian
Start Melakukan
pencarian
Masukan kata kunci
Jika ditemukan
Tampikan data ya Halaman
utama
Stop tidak
3.4.2 Flowchart login administrator
Start Masukkan Username
Halaman Utama
Username Benar
Masukkan Password Password
Salah
Password Benar
B
3.4.3 Flowchart halaman utama admin
Halaman Utama Admin
Manajemen
Data Tambah Data Simpan ke Database
Ya
Tambah Data Ya
Tidak
Ubah
Data Ubah Data Simpan ke Database
Ya
Tidak
Hapus
Data Hapus Data Simpan ke Database
Ya
Logout Tidak
Ya Ya
X
BAB 4
IMPLEMENTASI SISTEM
4.1Pengertian Implementasi Sistem
Implementasi sistem adalah prosedur yang dilakukan untuk menyelesaikan sistem
yang ada dalam dokumen rancangan sistem yang telah disetujui dan telah diuji,
menginstal dan memulai menggunakan sistem baru yang diperbaiki. Adapun
langkah-langkah yang dibutuhkan dalam implementasi sistem adalah:
1. Mendapatkan software dan hardware yang tepat/sesuai untuk merancang
website.
2. Menyelesaikan rancangan sistem.
3. Menulis, menguji, mengontrol dan mendokumentasikan website.
4. Mendapatkan persetujuan.
4.2 Tujuan Implementasi Sistem
1. Memberi rangkaian sistem baik dari segi software maupun hardware
sebagai sarana pengolahan data dan penyajian informasi.
2. Menyelesaikan rancangan sistem yang ada didalam dokumen sistem yang baru atau yang telah disetujui.
4.3 Komponen Sistem
Untuk menjalankan sistem yang telah dirancang, dibutuhkan beberapa komponen,
antara lain:
4.3.1 Hardware
Merupakan suatu komponen yang sangat dibutuhkan dalam mewujudkan sistem
yang diusulkan. Dalam hal ini, dapat dirincikan spesifikasi komponen hardware
yaitu:
1. PC dengan processor intel core i3. 2. Hard disk 250 GB.
3. Monitor Super VGA. 4. Memory minimal 1 GB. 5. Keyboard.
4.3.2 Software
Hardware tidak akan memecahkan suatu masalah tanpa adanya komponen
software. Adapun software yang sering digunakan dalam pembuatan website ini
adalah:
a. Sistem operasi Ms. Windows XP.
b. XAMPP Version 1.6.4 software yang merangkum Apache 2.2.8 sebagai
web server, PHP 5.2.4 sebagai web programming dan MySQL 5.0.45 sebagai database server.
c. Macromedia Dreamweaver 8 dan Sublime Text sebagai web editor.
d. Adobe Photoshop CS5 sebagai desain layout.
4.3.3 Brainware
Brainware adalah semua pihak yang bertanggung jawab dalam pengembangan
informasi, pemrosesan dan penggunaan keluaran informasi. Brainware dalam
sistem ini terbagi atas:
2. Programmer: orang yang membuat sistem dengan menggunakan salah satu bahasa pemrograman yang dikuasainya.
3. Operator: orang yang menggunakan dan memanfaatkan sistem.
4.4 Tampilan Akhir Website
4.4.1 Halaman index.php
Merupakan halaman utama yang akan diakses pertama kali ketika situs dibuka.
Pada halaman ini berisi menu utama beranda, tata cara, syarat dan ketentuan, sistem
penilaian dan tentang kami. Halaman ini juga berisi menu pencarian dan login.
Halaman index yang penulis bangun dibagi menjadi 2 bagian yaitu :
1. Halaman index.php untuk user
Merupakan halaman yang dapat diakses oleh user yang mengunjungi situs tersebut.
2. Halaman index.php untuk admin
Merupakan halaman yang dikhususkan untuk administrator situs, yang jika ingin
masuk ke halaman ini harus melakukan login terlebih dulu. Di halaman ini
administrator bisa melakukan penambahan, pengeditan maupun penghapusan
terhadap informasi yang di berikan.
4.4.1 Halaman home.php
Halaman ini berisi tentang informasi singkat tentang artikel yang telah di upload
admin.
BAB 5
KESIMPULAN DAN SARAN
5.1Kesimpulan
Dalam penulisan Tugas Akhir ini telah diuraikan bagaimana perancangan sistem
dalam membangun sistem informasi tentang kesehatan dan berbagai jenis penyakit,
maka dapat disimpulkan bahwa:
1. Penggunaan dan pemanfaatan website ini dapat membantu masyarakat untuk mengetahui pentingnya kesehatan.
2. Masyarakat dimudahkan dengan cara mendapat informasi dimana saja dan kapan saja hanya dengan komputer serta jaringan yang terhubung ke internet maka dapat menghemat tenaga dan waktu.
3. Website ini bersifat realtime dan dinamis sehingga memudahkan masyarakat dalam menggunakan website ini.
5. Pembuatan program dengan menggunakan PHP dan MySQL lebih memudahkan dalam hal perancangan dan untuk hasil akhirnya (output) dan lebih mudah dimengerti oleh pemakai.
5.2 Saran
Dengan selesainya perancangan Sistem Informasi Tips dan Saran Keluarga Sehat
ini maka diharapkan kepada masyarakat agar menambah wawasan tentang
kesahatan agar masyarakat terhindar dari penyakit karena mencegah lebih baik dari
DAFTAR PUSTAKA
Panduan Tatacara Penulisan Tugas Akhir. 2008. Dokumen Nomor :Akad/05/2005. Medan: Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sumatera Utara.
DIDIKAN DAN KEBUDAYAAN
UNIVERSITAS SUMATERA UTARA
FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM
Jl. Bioteknologi No. 1 Kampus USU Telp. (061) 8211050 Fax. (061) 8214290 Medan-20155 Email : Dekanat@FMIPA.USU.AC.ID
KARTU BIMBINGAN TUGAS AKHIR MAHASISWA
Nama Mahasiswa : Ali Syariati Nomor Stambuk : 1124061115
Judul Tugas Akhir : Perancangan Sistem Informasi Tips dan Saran Keluarga Sehat Berbasis Web
Dosen Pembimbing : Drs. Rosman Siregar M,Si Tanggal Mulai Bimbingan :
Tanggal Selesai Bimbingan:
No Tanggal Asisten Bimbingan
Pembahasan pada Asistensi Mengenai, pada
Bab
Paraf Dosen
Pembimbing Keterangan
1 2 3 4 5 6 7 8
Kartu ini harap dikembalikan ke Departemen Matematika bila bimbingan mahasiswa telah selesai
Diketahui, Disetujui Pembimbing Utama/ Program Studi D3 Teknik Informatika Penanggung Jawab
Ketua,
LISTING PROGRAM
LAMPIRAN Index.php
<!DOCTYPE html>
<html lang="en" class="no-js"> <head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Keluarga Sehat</title>
<meta name="description" content="Inspiration for Article Intro Effects" />
<meta name="keywords" content="title, header, effect, scroll, inspiration, medium, web design" />
<meta name="author" content="Codrops" /> <link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/normalize.css" /> <link rel="stylesheet" type="text/css" href="css/demo.css" /> <link rel="stylesheet" type="text/css" href="css/component.css" /> <!--[if IE]>
<script
src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
</head>
<body class="demo-2">
<div id="container" class="container intro-effect-fadeout"> <!-- Top Navigation -->
<div class="codrops-top clearfix">
<span class="right"><a class="codrops-icon codrops-icon-drop" href="home.php?m=home"><span>Masuk ke Halaman Utama</span></a></span>
</div>
<header class="header">
<div class="bg-img"><img src="image/_t.jpg" alt="Background Image" /></div>
<div class="title"> </br></br></br></br>
<h1>Keluarga Sehat Alami</h1>
<p class="subline">Inspiration for Article Intro Effects</p>
<p>by <strong>Mark Satorini</strong> — Posted in <strong>Animals</strong> on <strong>May 21,
</div> </header>
<button class="trigger" data-info="About Us"><span></span></button>
<article class="content"> <div>
<p>Cara menyikapi sakit kini telah sangat berubah. Masyarakat kini mengharapkan semua perawatan, bahkan atas kelainan yang paling berat pun, harus berhasil. Pada umumnya masyarakat telah lebih memahami makna kesehatan. Ketika diri atau anak mereka sakit, mereka lebih ingin mengetahui penyebab gejala yang mereka alami dan seberapa cepat mereka akan sembuh.</p>
<p>Sementara itu, kini kita juga semakin mandiri. Kebanyakan kita sadar berbagai penyakit ringan biasa, seprti pilek atau diare, tidak memerlukan bantuan ahli kesehatan atau pengobatan yang rumit. Gangguan semacam itu akan sembuh dengan sendirinya, bahkan walau tanpa mendapatkan pengobatan pun.</p>
<p>Masalah bagi mereka yang tidak terlatih secara medis adalah bahwa keluhan semacam sakit kepala ataupun batuk bisa merupakan petunjuk awal adanya sakit yang serius. Kejadian yang paling
membuat para orang tua waswas atau merasa tak berdaya adalah sakit mendadak menimpa anak-anak , terutama menimpa anak yang masih belum bisa
menjelaskan keluhannya. Sejauh mana seseorang cukup aman untuk mengatasi sendiri sebuah masalah? Kapan kita harus segera menelpon dokter atau meminta bantuan layanan kesehatan? kapan kita harus segera membawa si sakit ke unit gawat darurat sebuah rumah skit?</p>
<p>Terkadang kita menganggap sepele terhadap penyakit ringan yang mungkin adalah penyakit yang sangat serius. Untuk itulah web ini akan memberikan informasi tentang beberapa tips sehat yang dapa membuat anda menjadi lebih sehat dan terhindar dari penyakit dan berbagai informasi tentang penyakit agar anda lebih mngetahui gejala dan cara menghadapi penyakit tersebut, Serta obat herbal yang aman di konsumsi untuk tubuh dan mempunyai efek yang bagus.</p>
<p><strong>Semoga Bermanfaat</strong></p>
</div> </article>
<section class="related">
<span class="right"><a class="codrops-icon codrops-icon-drop" href="home.php?m=home"><span>Masuk ke Halaman Utama</span></a></span>
<p>Sehat bukan berarti tidak akan terkena penyakit</p>
<div>Lebih Baik Mencegah Dari pada Mengobati</h4></div>
</section> </div><!-- /container -->
<script src="js/classie.js"></script> <script>
(function() {
// detect if IE : from http://stackoverflow.com/a/16657946
var ie = (function(){
var undef,rv = -1; // Return value assumes failure.
var ua = window.navigator.userAgent; var msie = ua.indexOf('MSIE '); var trident = ua.indexOf('Trident/');
if (msie > 0) {
// IE 10 or older => return version number
rv = parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
} else if (trident > 0) {
// IE 11 (or newer) => return version number
var rvNum = ua.indexOf('rv:'); rv = parseInt(ua.substring(rvNum + 3, ua.indexOf('.', rvNum)), 10);
}
return ((rv > -1) ? rv : undef); }());
// disable/enable scroll (mousewheel and keys) from http://stackoverflow.com/a/4770179
// left: 37, up: 38, right: 39, down: 40,
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
var keys = [32, 37, 38, 39, 40], wheelIter = 0;
function preventDefault(e) { e = e || window.event; if (e.preventDefault) e.preventDefault(); e.returnValue = false; }
function keydown(e) {
if (e.keyCode === keys[i]) {
function touchmove(e) { preventDefault(e); }
function wheel(e) { // for IE //if( ie ) {
//preventDefault(e); //}
}
function disable_scroll() {
window.onmousewheel = document.onmousewheel = wheel;
document.onkeydown = keydown;
document.body.ontouchmove = touchmove; }
function enable_scroll() {
window.onmousewheel =
document.onmousewheel = document.onkeydown = document.body.ontouchmove = null;
}
var docElem = window.document.documentElement,
scrollVal, isRevealed, noscroll, isAnimating,
container = document.getElementById( 'container' ),
trigger = container.querySelector( 'button.trigger' );
function scrollY() {
return window.pageYOffset || docElem.scrollTop;
scrollVal = scrollY();
if( noscroll && !ie ) {
if( scrollVal < 0 ) return false; // keep it that way
window.scrollTo( 0, 0 ); }
if( classie.has( container, 'notrans' ) ) { classie.remove( container, 'notrans' ); return false;
}
if( isAnimating ) { return false; }
if( scrollVal <= 0 && isRevealed ) { toggle(0);
}
else if( scrollVal > 0 && !isRevealed ){ toggle(1);
} }
function toggle( reveal ) { isAnimating = true;
if( reveal ) {
classie.add( container, 'modify' ); }
else {
noscroll = true; disable_scroll();
classie.remove( container, 'modify' ); }
// simulating the end of the transition: setTimeout( function() {
isRevealed = !isRevealed; isAnimating = false; if( reveal ) {
noscroll = false; enable_scroll(); }
// refreshing the page... var pageScroll = scrollY(); noscroll = pageScroll === 0;
disable_scroll();
if( pageScroll ) {
isRevealed = true;
classie.add( container, 'notrans' ); classie.add( container, 'modify' ); }
window.addEventListener( 'scroll', scrollPage ); trigger.addEventListener( 'click', function() { toggle( 'reveal' ); } );
})(); </script> </body>
</html>
Home.php
<html>
<header>
<link href="main.css" rel="stylesheet" type="text/css" /> <meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Sliding Image Panels with CSS3" /> <meta name="keywords" content="sliding, background-image, css3, panel, images, slider" />
<meta name="author" content="Codrops" />
<link rel="stylesheet" type="text/css" href="demo.css" />
</header>
<body>
<div id="header"> </div>
<div id="menu"> <nav class="codrops-demos">
<a href="home.php?m=home">Home</a>
href="home.php?m=penyakit">Jenis Penyakit</a>
<a href="home.php?m=obat">Obat Herbal</a>
</nav>
</div>
<div id="container">
<?php include "koneksi.php"; ?> <div id="wrapper">
<div id="content">
<?php include'jump.php' ?>
</div>
<div id="content2">
<p>Artikel Terbaru</p></br></br> <?php
$sql = mysql_query("SELECT * FROM home ORDER BY tanggal DESC limit 10") or die ("Query gagal dengan error: ".mysql_error());
while($data=mysql_fetch_array($sql)){echo"<li><a
href=?m=home&act=tampil&id=$data[id]&kategori=$data[kategori]>$data[judul ]</a></li>";}
?> </div> <div id="content2">
<p><a><strong>9 Tips Untuk Hidup Sehat Berkualitas</strong></a></br>
</p>
<p> </p>
<p><em>1.Segelas air putih di pagi hari</em>. </p>
<p><em>2.Tidur yang Cukup</em>.</p> <p><em>3.Peregangan di pagi
hari</em>.</p>
<p><em>4.Biasakan sarapan di pagi hari</em>.</p>
<p><em>5.Sempatkan waktu untuk berjalan kaki setiap hari.</em></p>
<p><em>6.Lakukan interaksi sosial.</em></p>
<p><em>8.Cari Kegiatan baru</em></p> <p><em>9.Cintai Hidup Anda</em>.</p> </div>
</div> </div>
<div id="footer">
<p align="center"><a
href="login.php">admin</a></p></br><p align="center">© Keluarga Sehat</p>
</div> </body> </html>
Home1.php
<?php
switch($_GET[act]){
default:
echo'<section class="cr-container">
<input id="select-img-1" name="radio-set-1" type="radio" class="cr-selector-img-1" checked/>
<label for="select-img-1" class="cr-label-img-1">1</label>
<input id="select-img-2" name="radio-set-1" type="radio" class="cr-selector-img-2" />
<label for="select-img-2" class="cr-label-img-2">2</label>
<input id="select-img-3" name="radio-set-1" type="radio" class="cr-selector-img-3" />
<label for="select-img-3" class="cr-label-img-3">3</label>
<input id="select-img-4" name="radio-set-1" type="radio" class="cr-selector-img-4" />
<label for="select-img-4" class="cr-label-img-4">4</label>
<div class="clr"></div> <div class="cr-bgimg">
<div>
<span>Slice 1 - Image 4</span> </div>
<div>
<span>Slice 2 - Image 1</span> <span>Slice 2 - Image 2</span> <span>Slice 2 - Image 3</span> <span>Slice 2 - Image 4</span> </div>
<div>
<span>Slice 3 - Image 1</span> <span>Slice 3 - Image 2</span> <span>Slice 3 - Image 3</span> <span>Slice 3 - Image 4</span> </div>
<div>
<span>Slice 4 - Image 1</span> <span>Slice 4 - Image 2</span> <span>Slice 4 - Image 3</span> <span>Slice 4 - Image 4</span> </div>
</div>
<div class="cr-titles">
<h3><span>Sehat</span><span>Bahagia Bersama Keluarga Tercinta</span></h3>
<h3><span>Penyakit</span><span>Bila Dibiarkan Dapat Merenggut Yang Tercinta </span></h3>
<h3><span>Herbal</span><span>Jauh Lebih Sehat Untuk Kita</span></h3>
<h3><span>Melayani</span><span>Kami Siap Memberi Informasi Kesehatan Untuk Anda</span></h3>
</div>
gagal dengan error: ".mysql_error());
while($data=mysql_fetch_array($sql)){
echo'<div class="KetProd"> <img class="GambarKetProd" src="image/'; echo $data['image']; echo'">';
echo"<h1 class='Judul'>"; echo $data['judul']; echo'</h1></br>';
echo$data['tanggal']; echo'</br>'; echo $data['keterangan'];
echo"<a>. . . </a><a
href=?m=home&act=tampil&id=$data[id]&kategori=$data[kategori]><strong>La njut Baca</strong></a></div>
";}
$tampil2=mysql_query("select * from home"); $jmldata=mysql_num_rows($tampil2);
$jmlhalaman=ceil($jmldata/$batas); echo'</br></br></br></br>';
echo'<a>halaman : </a>'; for($i;$i<=$jmlhalaman;$i++) if($i!=$halaman)
{
echo "<a href=home.php?m=home&halaman=$i> $i </a>"; }
else {
echo "<b> $i </b> "; }
break;
case"tampil": $id=$_GET[id];
$kategori=$_GET[kategori];
if($kategori=='herbal'){$tempat='obat';}
elseif($kategori=='penyakit'){$tempat='penyakit';} elseif($kategori=='sehat'){$tempat='tips';}
$sql = mysql_query("SELECT * FROM $kategori where id='$id'") or die ("Query gagal dengan error:
".mysql_error());
<img class="GambarKetProd" src="image/'; echo $data['image']; echo'">';
echo"<h1 class='Judul'>"; echo $data['judul']; echo'</h1></br>';
echo$data['tanggal']; echo'</br>'; echo $data['keterangan'];
echo"</br></br></br><a href='home.php?m=home'><strong>Kembali</strong></a></div>
";} ?>
<div id="publishcomment">
<?php
$commentquery = mysql_query("SELECT * FROM komen_$kategori WHERE id_judul='$id'
ORDER BY id DESC") or die(mysql_error());
$commentNum = mysql_num_rows($commentquery); echo "<h4>" . "Current comment(s)..." . "</h4>";
echo "<b>" . $commentNum . " comment(s) so far. Leave a comment..." . "</b>" . "<br />" . "<br />";
echo "<hr>";
while($row = mysql_fetch_array($commentquery)) {
echo "<b>" . $row['nama'] . "</b>" . " " . " | " . " " . "<i>" .
$row['date'] . "</i>" . "<br />" . "<br />" . $row['komentar'] . "<br />"; echo "<hr>";
}
?></div>
<div id="comment">
<form name="submitcomment" method="post" action="submitcomment.php">Nama:<br> <input name="nama" type="text"><br>
Email:<br><input name="email" type="text"><br>
Komentar:<br><textarea name="komentar" rows="6" cols="50"></textarea><br> <input name="id_judul" value="<?php echo"$id";?>"; type="hidden">
<input name="judul" value="komen_<?php echo"$kategori";?>" type="hidden"> <input name="url" value="home.php?m=<?php
echo"$tempat";?>&act=tampil&id=<?php echo"$id";?>" type="hidden"><br> <input name="tombol" value="Kirim" type="submit"></form></div>
Demo.css
@font-face {
font-family: 'BebasNeueRegular'; src: url('fonts/BebasNeue-webfont.eot');
src: url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/BebasNeue-webfont.woff') format('woff'),
url('fonts/BebasNeue-webfont.ttf') format('truetype'),
url('fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg'); font-weight: normal;
font-style: normal; }
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,block quote,th,td {
margin:0; padding:0; }
html,body { margin:0; padding:0; height: 100%; }
table {
border-collapse:collapse; border-spacing:0;
}
fieldset,img { border:0; }
address,caption,cite,code,dfn,th,var { font-style:normal;
caption,th {
text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
}
section, header{ display: block; }
/* General Demo Style */ body{
font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
background: #fff url(../images/bg.jpg) repeat top left; font-weight: 400;
font-size: 15px; color: #3a2127; overflow-y: scroll; }
a{
color: #333;
text-decoration: none; }
.container{
width: 100%; height: 100%; position: relative; text-align: center; }
.clr{
clear: both; }
.container > header{
padding: 20px 30px 10px 30px; margin: 0px 20px 10px 20px; position: relative;
display: block;
text-shadow: 1px 1px 1px rgba(0,0,0,0.2); text-align: center;
}
.container > header h1{
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif; font-size: 35px;
line-height: 35px; position: relative; font-weight: 400;
color: rgba(26,89,120,0.9);
text-shadow: 1px 1px 1px rgba(0,0,0,0.1); padding: 0px 0px 5px 0px;
}
.container > header h1 span{ color: #7cbcd6;
}
.container > header h2{ font-size: 16px; font-style: italic; color: #2d6277;
text-shadow: 0px 1px 1px rgba(255,255,255,0.8); }
/* Header Style */ .codrops-top{
line-height: 24px; font-size: 11px;
background: rgba(255, 255, 255, 0.4); text-transform: uppercase;
z-index: 9999; position: relative;
box-shadow: 1px 0px 2px rgba(0,0,0,0.2); }
.codrops-top a{
padding: 0px 10px; letter-spacing: 1px; color: #333;
text-shadow: 0px 1px 1px #fff; display: block;
float: left; }
.codrops-top a:hover{ background: #fff; }
.codrops-top span.right{ float: right; }
.codrops-top span.right a{ float: left;
display: block; }
p.codrops-demos{ text-align:center; display: block; padding: 14px; }
p.codrops-demos a,
p.codrops-demos a.current-demo, p.codrops-demos a.current-demo:hover{ display: inline-block;
height: 60px; margin: 0px 3px; line-height: 60px; border-radius: 50%; font-weight: 800;
box-shadow: 1px 1px 1px rgba(0,0,0,0.05) inset; color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1); background: rgba(104,171,194,0.5); }
p.codrops-demos a:hover{ background: #4fa2c4; }
p.codrops-demos a.current-demo, p.codrops-demos a.current-demo:hover{
color: rgba(104,171,194,1);
background: rgba(255,255,255,0.9); box-shadow: 0px 1px 1px rgba(0,0,0,0.1); }
Jump.php
<?php
error_reporting(0);
$index=$_GET['m'];
if($index=='home'){
include('home1.php'); }
else if($index=='penyakit'){ include('penyakit.php'); }
else if($index=='tips'){ include('tips.php'); }
else if($index=='obat'){ include('obat.php'); }
else{
echo"hahahaa"; }
?>
Koneksi.php
<?php
$host="localhost"; $user="root"; $password=""; $database="ta";
$koneksi=mysql_connect($host,$user,$password); mysql_select_db($database);
?>
Login.php
<html> <head> <title></title> </head>
<body>
<p> </p> <p> </p> <p> </p>
<form action="loginpriksa.php" method="post"> <table align="center" width="284">
<tr>
<th colspan="2">Admin Keluarga Sehat Online</th> </tr>
<tr>
<td>User name</td>
<td><input type="text" name="username" size="20"></td> </tr>
<tr>
<td>Password</td>
<td><input type="password" name="password" size="20"></td> </tr>
<tr>
<td> </td>
</form>
</body> </html>
Loginperiksa.php
<?php
session_start();
include "koneksi.php";
$username=$_POST['username']; $password=$_POST['password'];
$query=mysql_query("select * from user where id='$username' and pass='$password'");
$cek=mysql_num_rows($query); if($cek){
$_SESSION['username']=$username; header('location: admin/admin.php'); }
else{
echo"Anda gagal login. silahkan "; }
?>
<a href="login.php">Login kembali</a>
Logout.php
<?php
session_start();
$username=$_SESSION["username"];
unset($_SESSION["username"]); header('location: ../home.php'); ?>
Main.css
body{
background-color: white; }
#header{ width: 100%; height: 300px;
float: left;
background-color: white; }
#menu{ width: 76%; height: 41px; float: left;
padding-left: 24%; background-color: white; font-size: 30px;
border-bottom: 2px solid #cf4a5c; }
#container{ width: 80%; margin: auto; }
#wrapper{ width: 100%; height: auto; float: left; }
#content{ width: 70%; height: auto; float: left; margin:10px;
padding: 20px 10px 10px 20px; background-color: white;
box-shadow: 0px 0px 15px #000; border-radius: 10px;
}
#content2{ width: 23%; height: auto; float: left;
margin-top: 10px;
padding: 10px 10px 10px 10px; background-color: white;
box-shadow: 0px 0px 15px #000; border-radius: 10px;
width: 100%; height: 50px; float: left;
background-color: white; border-top: 1px solid grey; }
.codrops-demos {
padding: 0 0 1em; position: relative; }
.codrops-demos a { font-weight: 800;
text-transform: uppercase; font-size: 0.6em;
letter-spacing: 1px; padding: 0.3em 0;
opacity: 0.7; margin: 0 0.5em; white-space: nowrap; color: #cf4a5c; }
.codrops-demos a:hover,
.codrops-demos a.current-demo { opacity: 1;
color: #69606b; }
.codrops-demos a.current-demo {
border-bottom: 3px solid #cf4a5c; }
.related {
padding: 3em 0; text-align: center; font-size: 1.5em; position: relative; }
}
@media screen and (max-width: 40em) {
.codrops-icon span { display: none; }
.related {
font-size: 80%; }
}
.Judul {
font-size: 18px; font-weight: bold; margin: 0px; }
.GambarKetProd { float: left;
width: 80px; margin-right: 20px;
padding: 3px 3px 3px 3px; border: 1px solid #CCC; }
.produk { float: left;
border: 1px solid #CCC; margin-top: 20px; margin-left: 20px; }
.KetProd {
background-color: #fff; width: 90%;
height: auto;
padding: 10px 10px 10px 10px; margin: 10px;
margin:20px 0 0 20px; border: 2px solid #848484; border-radius:20px;
-moz-border-radius:20px; max-height: 90%;
font-weight: bold; color: #606060; padding: 10px; width: 440px;
background-color: #dcdcdc; }
#publishcomment {
border: 2px solid #848484;
box-shadow: 12px 12px 7px #888888; margin: 30px 0 50px 20px;
padding: 10px; max-height: 100%; color: #3d3d3d; width: 550px; font-size: 12px; line-height: 15px; }
#publishcomment hr { color: #ccc;
}
#publishcomment a { color: #da5700; text-decoration: none; font-weight:normal; }
#publishcomment a:link { font-weight: bold;
}
#publishcomment a:hover { text-decoration: underline; }
.cr-container{
width: 600px; height: 400px; position: relative; margin: 0 auto; overflow: hidden; border: 20px solid #fff;
box-shadow: 1px 1px 3px rgba(0,0,0,0.1); }