Top Banner
PEMROGRAMAN WEB TUGAS 3 APLIKASI CRUD DENGAN TWITTER BOOTSTRAP Disusun oleh: M. Imam Fathoni 1310651101 JURUSAN TEKNIK INFORMATIKA FAKULTAS TEKNIK UNIVERSITAS MUHAMMADIYAH JEMBER 2015
13

Tugas CRUD Bootstrap 1310651101

Feb 06, 2016

Download

Documents

Toni

APLIKASI C.R.U.D DENGAN TWITTER BOOTSTRAP
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Tugas CRUD Bootstrap 1310651101

PEMROGRAMAN WEB

TUGAS 3

APLIKASI CRUD DENGAN TWITTER BOOTSTRAP

Disusun oleh:

M. Imam Fathoni

1310651101

JURUSAN TEKNIK INFORMATIKA

FAKULTAS TEKNIK

UNIVERSITAS MUHAMMADIYAH JEMBER

2015

Page 2: Tugas CRUD Bootstrap 1310651101

Page 1 of 12

Tugas 3

Aplikasi CRUD (Create Read Update Delete)

Task:

Buatlah sebuah aplikasi CRUD dengan PHP tentang mahasiswa, mata kuliah, dan KRS.

Form tampilan menggunakan twitter bootstrap.

Buat dokumentasinya dalam bentuk PDF dan upload di www.scribd.com

Link dokumen scribd di submit ke elearning.

Dikumpulkan paling lambat tanggal 6 Mei 2015 jam 23:55 WIB

Tools:

1) Notepad++ / Sublime Text / Aptana Studio / Netbeans / Eclipse / dan lain-lain

2) Web Browser (Mozilla Firefox / Google Chrome / Opera / dan lain-lain)

3) XAMPP (sebagai paket tools untuk menjalankan program berbasis PHP).

Proses:

1. Pembuatan database

Buat database seperti biasa (saya membuat dengan nama db “tugas”)

Buat 3 tabel yaitu krs, mahasiswa dan matakuliah.

Dengan struktur sebagai berikut:

Mahasiswa Matakuliah KRS

Page 3: Tugas CRUD Bootstrap 1310651101

Page 2 of 12

2. Pembuatan Koneksi

3. Index.php

Tampilan awal WEB

Page 4: Tugas CRUD Bootstrap 1310651101

Page 3 of 12

4. mahasiswa.php

Dengan

menggunakan table class

bordered maka tampilan

tabel akan disertai border

model dari bootstrap,

Bisa juga ditambahkan

class striped untuk belang,

dan hover untuk merespon

dari sentuhan mouse.

Sebelumnya masukkan data diri beberapa mahasiswa terlebih dahulu , dan

tampilannya akan seperti ini

Page 5: Tugas CRUD Bootstrap 1310651101

Page 4 of 12

5. Edit data mahasiswa (edit.php)

Page 6: Tugas CRUD Bootstrap 1310651101

Page 5 of 12

6. Delete Mahasiswa (delete.php)

Page 7: Tugas CRUD Bootstrap 1310651101

Page 6 of 12

7. Insertmahasiswa.php

Page 8: Tugas CRUD Bootstrap 1310651101

Page 7 of 12

8. Matakuliah.php

Page 9: Tugas CRUD Bootstrap 1310651101

Page 8 of 12

9. Editmatakuliah.php

Page 10: Tugas CRUD Bootstrap 1310651101

Page 9 of 12

10. Deletematakuliah.php

Page 11: Tugas CRUD Bootstrap 1310651101

Page 10 of 12

11. Insertmatakuliah.php

Page 12: Tugas CRUD Bootstrap 1310651101

Page 11 of 12

12. Krs.php

Page 13: Tugas CRUD Bootstrap 1310651101

Page 12 of 12

Twitter Bootstrap adalah css yang dibuat oleh Twitter, Twitter bootstrap ini

menerapkan konsep responsive template sehingga layout dapat

menyesuaikan dengan lebar dari media yang mengaksesnya. Untuk

dapat mengakses twitter bootstrap, maka perlu dipanggil dengan

sintaks <link href="css/bootstrap.css" rel="stylesheet"

media="screen"> diantara tag <head> dan </head>