Cascading Style Sheet (CSS) - SISTEM INFORMASI AKADEMIK D3 TEKNIK INFORMATIKA MENGGUNAKAN PHP D

BAB 1 PENDAHULUAN 1

2.8 Cascading Style Sheet (CSS)

CSS merupakan kependekan dari Cascading Style Sheet yang berfungsi untuk mengatur tampilan dengan kemampuan jauh lebih baik dari tag maupun atribut standar HTML (Hyper Text Markup Language). CSS sebenarnya adalah suatu kumpulan atribut untuk fungsi format tampilan dan dapat digunakan untuk mengontrol tampilan banyak dokumen secara bersama. Keuntungan menggunakn CSS yaitu jika kita ingin mengubah format dokumen, maka tidak perlu mengedit satu persatu.

Penggunaan CSS ada dua cara yaitu dengan menyisipkan kode CSS langsung dalam kode HTML atau simpan file tersendiri berekstensi “.css”, dengan menyimpan sebagai file tersendiri akan lebih memudahkan untuk mengontrol tampilan dalam banyak dokumen secara langsung. CSS mendapat dukungan penuh pada browser versi 4 (empat) dan pada versi sebelumnya. Perlu diketahui bahwa tampilan CSS dapat berbeda bila ditampilkan pada menu browser yang berbeda pula.

2.8.1 Struktur CSS

Perintah css terdiri atas 2 komponen, yakni Selector dan Declaration.

1. Selector berfungsi untuk memberi tahu web browser bahwa pada elemen mana aturan css akan diterapkan. Selector dapat berupa nama tag, selector class atau selector id.

2. Declaration merupakan aturan css yang diterapkan yang mana terdiri atas property dan value.

2.8.2 Penulisan CSS

CSS juga memiliki aturan-aturan penulisan yaitu : 1. Internal Style

Internal style dengan menggunakan tag style dan diletakkan diantara tag head.

<html>

<head>

<title>CSS</title>

<style>

h1 { color : blue; }

</style>

</head>

</html>

Internal style tidak harus selalu diletakkan diantara tag head. Kita selalu bisa meletakkan diantara tag lain yang ada didalam tag body. Namun untuk menciptakan kode yang lebih bersih dan terstruktur dengan baik, css biasa diletakkan diantara tag head.

2. Inline Style

Inline style dengan menambahkan langsung kode css kedalam tag html sebagai attribut. <h1 style=”color:blue;”>Judul Satu</h1>.

3. External Style

External style dengan menggunakan tag link yang diletakkan diantara tag head dan merujuk keberkas css.

<html>

<head>

<title>CSS</title>

<link href=”style.css” rel=”stylesheet”>

</head>

<body>

2.8.3 Selector

Seperti sudah disebutkan sebelumnya, selector dapat berupa nama tag, selector class atau selector id. Berikut ini adalah contoh penggunaan selector dalam css.

<html>

<head>

<title>Belajar Selector</title>

<style>

h1 { color: blue; } judul {color: red; }

#satu {color: green; }

</style>

</head>

<h1>Selector Tag</h1>

<h1 class=judul>Selector Class</h1>

<h1 id=satu>Selector Id</h1>

</head>

</html>

2.8.4 Memformat Dokumen dengan CSS

Memformat dokumen dengan css jauh lebih fleksibel dibandingkan dengan menggunakan tag html saja.

<html>

<head>

<title>Format CSS</title>

<style type=text/css>

body { background-color:yellow; } h1 { color:blue; text-align: center; } b { font-weight:normal; }

i { font-style:normal; } u { text-decoration:none; } b, i { color:green; }

</style>

</head>

<body bgcolor=green>

<h1>DOKUMEN HTML</h1>

<b>Pemrograman Web</b>

<br>

<i>Pemrograman Web</i>

<br>

<u>Pemrograman Web</u>

</body>

</html>

2.9 JavaScript

JavaScript mulanya bernama LiveScript, dikembangkan pertama kali pada tahun 1995 di Netscape Communication. Pada akhir tahun 1995 Netscape Communication dan Sun Microsystem berkolaborasi dan mengganti nama LiveScript menjadi JavaScript.

JavaScript adalah bahasa script yang ditempatkan pada kode HTML dan diproses pada sisi client. Dengan adanya bahasa ini maka kemampuan dokumen HTML menjadi lebih luas. Sebagai contoh, digunakan untuk validasi masukan formulir sebelum diproses ke tahap selanjutnya. Bisa untuk membuat permainan interaktif dan juga bisa untuk menambah design web.

Javascript merupakan bahasa scripting yang didisain untuk membuat halaman web menjadi lebih interaktif. Javascript bekerja secara client-side (disisi client).

Sehingga javascript bergantung pada browser yang digunakan untuk menampilkan halaman web yang mengandung javascript.

Perlu diperhatikan bahwa Javascript berbeda dengan Java. Keduanya sangat berbeda baik itu dari sisi bahasa maupun dari konsep dan disainnya.

<head>

<title>Belajar JavaScript</title>

<script language=javascript>

document.write("<h1>Belajar JavaScript</h1>");

</script>

</head>

<body>

……

</body>

</html>

2.9.1 Penulisan Javascript

Internal script dengan menggunakan tag script dan diletakkan diantara tag head.

<html>

<head>

<title>JavaScript</title>

<script languange=”javascript”>

Pemrograman Web – Wirasto S. Karim 28

document.write("<h1>Belajar JavaScript</h1>");

</script>

</head>

</html>

External script tetap dengan menggunakan tag script namun merujuk keberkas javascript.

<html>

<head><title>JavaScript</title>

<script languange=”javascript” src=”script.js”></script>

</head>

</html>

2.9.2 Variabel

Dalam javascript, variabel dideklarasikan dengan statement var dan diakhiri dengan tanda ; (titik koma). Variabel juga bersifat case-sensitive yang artinya membedakan huruf kecil dan huruf besar. Sehingga variabel nama berbeda dengan variabel NAMA.

<html>

<head>

<title>Belajar JavaScript</title>

<script language=javascript>

var a = 4;

var b = 10;

var c = a + b;

var d = "<br>Bo gambangi da'a ei";

document.write(c);

</script>

</head>

<body>

……

</body>

</html>

2.9.3 Kondisi

Kondisi digunakan untuk melakukan eksekusi suatu pernyataan secara bersyarat.

kondisi1.html

<html>

<head>

<title>Belajar JavaScript</title>

<script language=javascript>

var nama = "wirasto";

if (nama == "wirasto") { document.write("Benar");

}

</script>

</head>

<body>

……

</body>

</html>

kondisi2.html

<html>

<head>

<title>Belajar JavaScript</title>

<script language=javascript>

var awal = 1;

var akhir = 5;

if (awal < akhir) {

document.write("Nilai awal lebih kecil dari nilai akhir");

} else {

document.write("Nilai awal TIDAK lebih kecil dari nilai akhir");

}

</script>

</head>

<body>

</body>

</html>

kondisi3.html

<head>

<title>Belajar JavaScript</title>

<script language=javascript>

var awal = 1;

var akhir = 5;

if (awal < akhir) {

document.write("Nilai awal lebih kecil dari nilai akhir"); } else { document.write("Nilai awal TIDAK lebih kecil dari nilai

akhir");

}

</script>

</head>

<body>

……

</body></html>

BAB 3

PERANCANGAN SISTEM

3.1 Perancangan Sistem

Seiring dengan perkembangan teknologi informasi saat ini, serta untuk meningkatkan efesiensi kerja dan waktu, maka masih banyak sistem yang ada saat ini yang masih manual dan harus diganti dengan sistem yang lebih baik lagi. Hal ini dilakukan dengan cara membangun sistem yang terkomputerisasi atau online. Untuk memulai membangun suatu program mengenai perancangan System informasi akademik, maka penulis terlebih dahulu merencanakan alur kerja berdasarkan kebutuhan dari user yang akan menggunakan aplikasi basis data ini.

Perancangan merupakan proses yang dilakukan oleh perancang sistem untuk mengerjakan spesifikasi sistem, membuat keputusan tentang bagaimana komponen sistem diaktualisasikan. Proses ini menyangkut tujuan sistem tersebut, audience, objek dan informasi domain. Perancangan yang baik harus mengetahui bagaimana mendapatkan efek yang dibutuhkan oleh spesifikasi tersebut dengan cara paling fleksibel, efesien dan elegan.

3.2 Data Flow Diagram (DFD)

Data Flow Diagram (DFD) merupakan model dari sistem untuk menggambarkan pembagian sistem ke modul yang lebih kecil. Salah satu keuntungan menggunakan diagram alir data adalah memudahkan pemakai yang kurang menguasai bidang komputer untuk mengerti sistem yang akan dikerjakan. Pada tahap analisa, penanganan notasi simbol lingkaran dan anak panah menggambarkan arus data dalam perancangan sistem sangat membantu dalam komunikasi dengan pemakaian sistem menggunakan notasi-notasi untuk menggambarkan arus dari data sistem.

Disamping itu DFD adalah salah satu alat pembuatan model yang sering

digunakan, khususnya bila fungsi-fungsi sistem merupakan bagian yang lebih penting dan kompleks dari pada data yang dimanipulasi oleh sistem. Dengan kata lain, DFD adalah alat pembuatan model yang memberikan penekanan hanya pada fungsi sistem.

DFD juga merupakan alat perancangan sistem yang berorientasi pada alur data dengan konsep dekomposisi dapat digunakan untuk penggambaran analisa maupun rancangan sistem yang mudah dikomunikasikan oleh profesional sistem kepada pemakai maupun pembuat program.

Tabel 3.1 Simbol-simbol Data Flow Diagram

No Simbol Fungsi

Eksternal Entity merupakan kesatuan diluar lingkungan System yang dapat berupa seseorang, organisasi yang dapat mengirimkan data atau menerima data dari sistem.

2 Arus data merupakan tempat mengalirnya

informasi menunjukan arus data berupa sistem.

3 Proses merupakan pengolahan data atau aliran

data masuk menjadi data aliran keluar.

4 Penyimpanan data merupakan tempat

penyimpanan data yang ada di dalam sistem.

3.3 Perancangan Database

Database adalah kumpulan dari data yang berhubungan antara yang satu dengan yang lainnya, tersimpan diperangkat keras komputer dan menggunakan perangkat lunak untuk memanipulasinya. Database merupakan salah satu komponen yang penting dalam sistem komputerisasi, karena database merupakan kumpulan dari beberapa file, dalam hal ini file-file tersebut dikelompokan secara terstruktur dalam beberapa tabel sesuai dengan informasi yang terkandung di dalamnya.

Berikut ini rancangan tabel yang penulis gunakan dalam membangun sistem informasi nilai:

1. Tabel admin terdiri dari:

Tabel 3.2 Tabel Admin

Field Name Data Type Size Description

username* varchar 30 Username

Password varchar 30 Password

2. Tabel dosen terdiri dari:

Tabel 3.3 Tabel Dosen

Field Name Data Type Size Description

id* Int 3 Id

kode_dosen Varchar 10 Kode Dosen

Nama Varchar 50 Nama Dosen

3. Tabel jadwal terdiri dari:

Tabel 3.4 Tabel Jadwal

Field Name Data Type Size Description

id_jadwal* Int 10 Id

Hari Varchar 10 Hari

Waktu Varchar 20 Waktu

mata_kuliah Varchar 50 Mata kuliah

Dosen Varchar 10 Dosen

Ruang Varchar 10 Ruang

Com Varchar 10 Komputer

4. Tabel kelas terdiri dari:

Tabel 3.5 Tabel Kelas

Field Name Data Type Size Description

id* Int 3 Id

kd_kelas Varchar 10 Kode Kelas

Unit Varchar 2 Unit

Lantai Varchar 2 Lantai

Ruang Varchar 2 Ruang

Keterangan Varchar 40 Keterangan

3.4 Flowchart

Flowchart adalah sekumpulan simbol-simbol yang menunjukan atau menggambarkan rangkaian kegiatan-kegitan program dari awal hingga akhir. Jadi flowchart juga dapat digunakan untuk menggambarkan urutan langkah-langkah pekerjaan dalam suatu algoritma. Penjelasan arti dari lambing-lambang flowchart dapat didefinisikan seperti tabel dibawah ini:

Tabel 3.6 Simbol-simbol Flowchart

No Simbol Keterangan

1 Terminal point symbol digunakan untuk

menunjukan awal dan akhir suatu proses.

Simbol proses atau pengolahan digunakan untuk mewakili suatu proses. Seperti pengolahan aritmatika atau pemindahan data.

3 Simbol input/output digunakan untuk menunjukan

masukan atau keluaran dari suatu proses.

Simbol keputusan (decision) digunakan untuk mewakili operasi perbandingan logika atau suatu penyeleksian kondisi di dalam program.

Simbol proses terdefinisi (predefined process symbol) digunakan untuk menyatakan sekumpulan langkah proses yang ditulis sebagai prosedur.

Simbol penghubung digunakan untuk menunjukan sambungan dari bagan alir yang terputus yang masih terdapat di halaman yang sama.

Simbol penghubung halaman lain (off-page connector) digunakan untuk menunjukan arus bagan alir yang terputus dengan sambungannya yang terdapat di halaman lain.

8 Simbol garis alir digunakan untuk menunjukan aliran atau arus dari suatu proses.

Simbol dokumuen (documents) digunakan untuk menunjukan semua jenis dokumen yang merupakan formulir digunakan untuk merekam data terjadinya transaksi.

Simbol database digunakan untuk meyediakan tempat pengolahan data serta penyimpanan dalam storage.

Simbol display digunakan untuk output yang menunjukan ke suatu device, contohnya adalah printer dan plotter.

3.4.1 Flowchart Utama

Halaman Judul TA

Halaman Portal TI Mahasis

Halaman Alumni Halaman Mahaiswa

Halaman Dosen TI

Porta l TI

Judul Ta Alum

ni Dose

n TI Pilih

Home Start

Gambar 3.1 Alur Flowchart Menu Utama

Gambar 3.2 Alur Flowchart Login Admin

Gambar 3.3 Alur Flowchart Menu Utama Admin

BAB 4

IMPLEMENTASI SISTEM

Bab ini menjelaskan tentang hasil pembahasan dari penelitian. Hasill penelitian yang diperoleh berupa implementasi dari rancangan aplikasi yang dibuat pada bab sebelumnya. Proses-proses pada bab sebelumnya tersebut termasuk ke dalam tahap proses model prototipe bagian analisis kebutuhan dan pemodelan cepat. Di bab empat ini akan dibahas implementasi pengujian dari perancangan-perancangan tersebut berdasarkan skenario pengguna. Implementasi tersebut merupakan tahap dalam sistem informasi berbasis web bagian pengujian dan evaluasi aplikasi.

Aplikasi yang dibuat masih berupa System informasi yang baru dijalankan pada localhost, belum diimplementasikan ke dalam internet. Pembuatan aplikasi ini menggunakan PHP sebagai bahasa pemrograman utama dan MySQL sebagai database.

4.1 Pengertian Implementasi Sistem

Setelah dianalisis dan dirancang secara rinci dan teknologi telah diseleksi dan dipilih.

Tiba saatnya, sistem untuk di implementasikan. Implementasi sistem adalah langkah-langkah atau prosedur yang dilakukan dalam menyelesaikan desain sistem yang telah disetujui, untuk menguji, meng-install, dan memulai sistem baru atau sistem yang diperbaiki untuk menggantikan sistem yang lama, sedangkan tahap implementasi sistem merupakan tahap meletakkan sistem agar sistem dapat siap untuk dioperasikan. Tahap implementasi sistem terdiri dari langkah-langkah sebagai berikut ini, yaitu menerapkan rencana implementasi, melakukan kegiatan implementasi, dan tindak lanjut implementasi.

Tujuan-tujuan dari implementasi sistem, yaitu:

1. Mengkaji rangkaian sistem baik dari segi software maupun hardware sebagai sarana pengolah data dan penyaji informasi.

2. Menyelesaikan rancangan sistem yang ada dalam dokumen sistem yang baru atau yang telah disetujui.

3. Memastikan bahwa pemakai dapat mengoperasikan dengan mudah terhadap sistem yang baru dan mendapat informasi yang baik dan jelas.

4. Memperhitungkan bahwa sistem telah memenuhi permintaan pemakai yaitu dengan menguji sistem secara menyeluruh.

5. Memastikan bahwa sistem telah berjalan lancar dengann mengontrol dan melalukan instalasi secara benar.

4.3 Komponen Dalam Implementasi Sistem

Agar perancangan sistem yang telah kita kerjakan dapat berjalan baik atau tidak, maka perlu dilakukan pengujian terhadap sistem yang telah dikerjakan. Untuk itu dibutuhkan beberapa komponen utama yang mencakup perangkat keras (hardware), perangkat lunak (software), dan perangkat operator (brainware).

4.3.1 Kebutuhan Perangkat Keras (Hardware)

Perangkat keras (hardware) merupakan komponen-komponen peralatan yang membentuk suatu sistem komputer dan peralatan-peralatan tambahan lainnya yang mungkin komputer menjalankan tugasnya sesuai dengan yang diberikan. Komponen ini bersifat nyata secara fisik, artinya dapat dilihat dan dipergunakan, misalnya monitor, CPU (Central Processing Unit), printer, keyboard, dan mouse. Spesifikasi perangkat keras komputer yang digunakan dalam pembuatan website ini adalah:

1. Personal Computer dengan Processor min Intel Pentium 3.

2. Memory min 512 MB.

3. Monitor W 14” resolution 1024x768.

4. Hardisk sebagai media penyimpan.

5. DVDR/W.

4.3.2 Kebutuhan Perangkat Lunak (Software)

Hardware tidak dapat menyelesaikan masalah tanpa adanya software. Software merupakan komponen di dalam sistem data berupa program atau instruksi untuk mengontrol suatu sistem. Perangkat lunak yang diperlukan untuk menjalankan perangkat kerasnya adalah Windows 7, XAMPP, MySQL, Browser, dan Sublime.

4.3.3 Kebutuhan Brainware

Perangkat Operator (Brainware) yang dapat menjalankan website ini terbagi menjadi 5 yaitu administrator, dosen, mahasiswa, kepala jurusan, dan wali mahasiswa

4.4 Tampilan Website

Untuk menjalankan System guna web browser pada pengujian ini penulis menggunakan web browser Mozilla Firefox dan Google Chrome setelah web browser jalan, ketikkan pada addres bar http://localhost/TA/index.php untuk pengetesan halaman utama. Halaman utama sistem tersebut seperti pada gambar berikut:

Gambar 4.1 Halaman Login

Gambar 4.2 Halaman Home Admin

Gambar 4.3 Halaman Data Mahasiswa

Gambar 4.4 Halaman Dosen Pengajar

Gambar 4.5 Halaman Ruang Kelas

Gambar 4.6 Halaman Mata Kuliah

Gambar 4.7 Halaman Wali Mahasiswa

Gambar 4.8 Halaman Data Administrator

BAB 5

KESIMPULAN DAN SARAN

5.1 Kesimpulan

Berdasarkan pembahasan pada bab-bab sebelumnya maka pada bab ini penulis dapatmengambil kesimpulan sebagai berikut:

1. Dengan menggunakan sistem yang baru dengan pemakain perangkat komputer yang memanfaatkan fasilitas internet sebagai alat bantu untuk mempermudah penyajian informasi suatu informasi dan pengolahan data dapat dilakukan dengan cepat dan tepat.

2. Sistem informasi berbasis web ini akan memberikan kemudahan-kemudahan, baik bagi pihak intern (universitas) maupun pihak extern (masyarakat luas) karena sistem ini nantinya siap akses selama 24 jam.

3. Sistem informasi Berbasis Web ini penulis buat dengan bahasa pemrograman PHP dan menggunakan MYSQL sebagai databasenya dan memanfaatkan jaringan internet untuk publikasinya sehingga dapat dikonsumsi oleh public.

4. Sistem informasi berbasis web ini menyediakan menu administrator untuk keperluan manajemen dari website. Pengguna dari sistem ini adalah dosen dan mahasiswa.

5.2 Saran

Berdasarkan kesimpulan di atas maka dapat diberikan saran-saran yang penulis usulkan yang berguna nantinya dan yang menjadi bahan pertimbangan bagi Prodi D3 Teknik Informatika dalam menggunakan Sistem Informasi Berbasis Web ini antara lain:

1. Dengan adanya sistem yang telah dirancang maka Program Studi D3 Teknik Informatika diharapkan dapat menggunakan atau memanfaatkan komputer dan fasilitas internet dalam hal penginformasian data dan pengolahan data sehingga

dapat meningkatkan pelayanan dan efektifitas kerja yang lebih baik.

2. Sistem yang baru hendaknya dilakukan pengoprasian dan perawatan secara optimal dalam penginformasian data dan pengolahan data.

3. Kiranya System informasi berbasis web ini dapat digunakan secara optimal agar hasil yang diharapkan dapat terwujud.

4. Mengadakan pelatihan terhadap pihak terkait yang akan mengoperasikan sistem yang baru. Setelah dirasakan sistem yang baru dapat dioperasikan dengan baik dan bagian terkait telah mampu mengoperasikan sistem tersebut, maka sistem lama dapat digantikan dengan sistem yang baru secara keseluruhan.

DAFTAR PUSTAKA

Sutarman, 2007, “Membangun Aplikasi Web dengan PHP dan MySQL”.

Yogyakarta: Graha Ilmu.

Abdul Kadir, 2003. “Pengenalan Sistem Informasi”. Yogyakarta: Andi.

Irwanto, Djon. S. Kom., MM, 2006, “Perancangan Object Oriented Software dengan UML”. Andi, Yogyakarta.

Al Bahra bin Ladjamudin, 2005, “Analisis dan Desain Sistem Informasi”.

Yogyakarta: Graha Ilmu.

Alan Dennis, Barbara Haley Wixom, David Tegarden, 2005, “System Analysis

And Design With UML Version 2.0”. United State of America:

Phoenix Color Corp.

Abdul Kadir, 2000. “Konsep dan Tuntunan Praktis Basis Data”. Yogyakarta:

Penerbit Andi.

Dalam dokumen SISTEM INFORMASI AKADEMIK D3 TEKNIK INFORMATIKA MENGGUNAKAN PHP DAN MYSQL TUGAS AKHIR SITI FATMALA PASARIBU (Halaman 34-65)