Tugas

Pemrograman Berorientasi Objek

(twitter-Bootstrap)

Dosen : Mudafik Ryan

Penulis : Dita Hidayatus Sholeha (1210651132)

JURUSAN TEKNIK INFORMATIKA

FAKULTAS TEKNIK

UNIVERSITAS MUHAMMADIYAH JEMBER

2014

BAB I

I. Tujuan

a. Memahami konsep dasar Twitter Bootstrap

II. Penjelasan

buah alat bantu untuk membuat sebuah tampilan halaman website yang

dapat mempercepat pekerjaan seorang pengembang website ataupun

pendesain halaman website. Sesuai namanya, website yang dibuat dengan alat

bantu ini memiliki tampilan halaman yang sama / mirip dengan tampilan

halaman Twitter atau desainer juga dapat mengubah tampilan halaman

website sesuai dengan kebutuhan.

Twitter Bootstrap dibangun dengan teknologi HTML dan CSS yang dapat

membuat layout halaman website, tabel, tombol, form, navigasi, dan

komponen lainnya dalam sebuah website hanya dengan memanggil

fungsi CSS (class) dalam berkas HTML yang telah didefinisikan. Selain itu juga

terdapat komponen-komponen lainnya yang dibangun

menggunakan JavaScript.

III. Membuat Sistem KRS

a. Membuat database

Database yang saya buat ini bernama ditakrs1132

CREATE database ditakrs1132;

Selanjutnya buat tabel dalam database tersebut

Tabel mahasiswa

CREAT TABLE mahasiswa (

nim char (15) NOT NULL

nama varchar (30) NOT NULL

UNIQUE KEY nim(nim)

);

Setelah melakukan pembuatan tabel, selanjutnya kita inputkan data

mahasiswa. Cara memasukkan data

INSERT INTO mahasiswa VALUE (1210651132,Dita Hidayatus Sholeha);

Begitu seterusnya dengan mengganti valuenya. This result :

Tabel matakuliah

CREATE TABLE matakuliah(

kode_matkul varchar(10) NOT NULL,

nama_matkul varchar(50) NOT NULL,

sks int(2) NOT NULL,

UNIQUE KEY kode (kode_matkul),

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

INSERT INTO mahasiswa VALUE (MU001, Bhs Inggris, 2);

Begitu seterusnya dengan mengganti isi valuenya. This result :

Tabel krs

CREATE TABLE krs (

nomor int(4) NOT NULL auto_increment,

nim varchar(15) NOT NULL,

kodekuliah varchar(10) NOT NULL,

semester varchar(15) NOT NULL,

tahun int(5) NOT NULL,

PRIMARY KEY (nomor)

);

Khusus untuk tabel ini tidak di inputkan karena datanya akan di inputkan

melalui web yang akan saya bangun.

Berikutnya buat folder baru didalam folder hatdoks dengan nama

sama pada database yang dibuat tadi ditakrs1132. Pada kelas lalu

diberikan file bootstrap yang didalamnya ada folder folder sebagai

berikut :

Folder css, font, img, js dan file custom.json pindah ke folder

ditakrs1132

b. Setelah selesai membuat databasenya dilanjutkan mengoding ria

File index.php

Koding diatas digunakan untuk bootstrap templete.

KRS Online fungsi untuk menuliskan pada window dg

nama KRS Oneline.

href=css/bootsrap.cssfungsi ini memanggil file bootstrap yang terdapat

dalam folder css.

src=js/jquery,js fungsi ini memanggil file jquery yang terdapat dalam

folder js.

src=js/bootsrap.js fungsi ini memanggil file bootstrap yang terdapat

dalam folder js.

Syntax diatas untuk menampilkan gambar atas

fungsi ini digunakan untuk mengambil inputan

nim sebagai prymary key membuka window input.php

Line no.27-41 Adalah fungsi dari twitter bootstrap untuk menampilkan

sign

This result :

File input.php

Line 8-10, mengkoneksikan file yang kita buat dengan database yang

telah kita buat.

Line 12-13, menggambilnilai primary key nim dari sql mahasiswa.

18-21 peringatan jika nim yang telah di inputkan sebagai login tidak

terdaftar di dalam database yang telah kita buat.

Line 24-32, pengambilan krs dengan memasukkan mysql_query dengan

memanggil matakuliah, karena kita akan megambil matakuliah sesuai

data yang terdapat di database.

Line 47-67, adalah perintah untuk menjumlahkan sks yang telah kita

ambil. Ketika kita mengclik tabel warna bacgrounnya berubah lightblue.

This result

File output.php

Saat menginputkan data

This result :

Ketika dicetak

Sekian laporan dari saya, apabila masih ada salah saya mohon maaf .

Karena saya masih dalam tahap belajar.