PEMROGRAMAN WEB. Indra Gunawan, ST., M.Kom., CEH., CHFI

Ukuran: px

Mulai penontonan dengan halaman:

Download "PEMROGRAMAN WEB. Indra Gunawan, ST., M.Kom., CEH., CHFI"

Sudomo Hartono
6 tahun lalu
Tontonan:

1 PEMROGRAMAN WEB Indra Gunawan, ST., M.Kom., CEH., CHFI

2 Curiculum Vitae Pendidikan : S1 Teknik Informatika, Minat Studi Kecerdasarn Buatan, 2007, Universitas Islam Indonesia Yogyakarta Skripsi : Membuat Aplikasi Algoritma Genetika utk menyelesaikan Knapsack Problem menggunakan Vb.Net S2 Teknik informatika, Minat Studi Digital Forensic, 2014, Cumlaude, Universitas Islam Indonesia Yogyakarta Thesis : Membangun Aplikasi I-Polink (Indonesian Police Link) yaitu Knowledge Management untuk membantu investigasi forensika digital pada Laboratorium Digital Forensic Mabes Polri. Pengalaman Kerja : Software Konsultan +- 4 tahun, 2011, Jakarta dan Batam, telah melakukan implementasi di an perusahaan di Jakarta, Bandung, Denpasar, Pekanbaru dan Batam. Founder of Ex-java Technologies, , Batam, mempunyai client di pemerintahan, perusahaan lokal maupun perusahaan asing di Batam. International Certification: Computer Ethical Hacking, ECCouncil. Computer Hacking Forensic Investigator, ECCouncil. Cisco Networking Academy Program, Cisco.

3 CONTACT PERSON Igunawan@stt-ibnusina.ac.id HP / WA : PIN : 7EC491F9 Blog : Modul silahkan download di KelasOnline/Elearning

4 ATURAN DAN PENILAIAN Syarat Ujian UTS : Kehadiran 50% Syarat Ujian UAS : Kehadiran 50% Range Nilai : Unsur Penilaian : Kehadiran : 20% Tugas : 30% UTS : 25% UAS : 25% = A = B = C = D <= 40 = E

5 OUTLINE MATERI 1. Introduction 2. Server-side & Client-side programming 3. HTML Language 4. CSS Cascading Style Sheets 5. CSS vs Framework CSS 6. PHP Personal Home Page 7. PHP vs Framework PHP 8. CodeIgniter PHP Framework 9. RDBMS MYSQL 10. CMS Content Management System 11. Security Threats 12. Securing www 13. Web Server 14. Hosting & Implementation

6 REFERENSI

7 CSS FRAMEWORK THE GOOD They can help you learn CSS. They provide code that you just don't need to write from scratch every time. Enables cross-browser functionality It helps you build good habits. Gives you clean and symmetrical layouts They come with documentation. They lay groundwork. Speeds up your development

8 CSS FRAMEWORK THE BAD Restricts your freedom Adds extra code Forces you to use the framework s semantics You could potentially lose time

9 CSS FRAMEWORK 5 MOST POPULAR CSS FRAMEWORK : 1. Bootstrap 2. Foundation by ZURB 3. Semantic UI 4. Pure by Yahoo 5. UIkit by YOOtheme

10 FILE STRUCTURE BOOTSTRAP

11 BOOTSTRAP BASIC CODE <!DOCTYPE html> <html> <head> <title>bootstrap 101 Template</title> <meta name="viewport" content="width=device-width, initial-scale=1.0">  <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> </head> <body> <h1>hello, world!</h1> <script src=" <script src="js/bootstrap.min.js"></script> </body> </html>

12 BOOTSTRAP

13 BOOTSTRAP

14 BOOTSTRAP

15 BOOTSTRAP

16 BOOTSTRAP

17 BOOTSTRAP

18 BOOTSTRAP

19 TABLE STYLING STANDART <table class="table"> </table> BOOTSTRAP STRIPPED <table class="table table-striped"> </table> BORDERED <table class="table table-bordered"> </table> HOVER <table class="table table-hover"> </table> CONDENSED <table class="table table-condensed"> </table>

20 BOOTSTRAP FORM STYLING LOGIN FORM <form class="form-inline"> <input type="text" class="input-small" placeholder=" "> <input type="password" class="input-small" placeholder="password"> <label class="checkbox"> <input type="checkbox"> Remember me </label> <button type="submit" class="btn">sign in</button> </form>

21 BOOTSTRAP LOGIN FORM HORIZONTAL <form class="form-horizontal"> <div class="control-group"> <label class="control-label" for="input "> </label> <div class="controls"> <input type="text" id="input " placeholder=" "> <div class="control-group"> <label class="control-label" for="inputpassword">password</label> <div class="controls"> <input type="password" id="inputpassword" placeholder="password"> <div class="control-group"> <div class="controls"> <label class="checkbox"> <input type="checkbox"> Remember me </label> <button type="submit" class="btn">sign in</button> </form>

22 MULTIPLE GRID FORM BOOTSTRAP <div class="controls"> <input class="span5" type="text" placeholder=".span5"> <div class="controls controls-row"> <input class="span4" type="text" placeholder=".span4"> <input class="span1" type="text" placeholder=".span1">

23 BOOTSTRAP SUBMIT BUTTON <div class="form-actions"> <button type="submit" class="btn btn-primary">save changes</button> <button type="button" class="btn">cancel</button>

24 HELP/VALIDATION LABEL BOTSTRAP <div class="control-group warning"> <label class="control-label" for="inputwarning">input with warning</label> <div class="controls"> <input type="text" id="inputwarning"> <span class="help-inline">something may have gone wrong</span> <div class="control-group error"> <label class="control-label" for="inputerror">input with error</label> <div class="controls"> <input type="text" id="inputerror"> <span class="help-inline">please correct the error</span> <div class="control-group info"> <label class="control-label" for="inputinfo">input with info</label> <div class="controls"> <input type="text" id="inputinfo"> <span class="help-inline">username is already taken</span> <div class="control-group success"> <label class="control-label" for="inputsuccess">input with success</label> <div class="controls"> <input type="text" id="inputsuccess"> <span class="help-inline">woohoo!</span>

25 BUTTON BOOTSTRAP

26 BOOTSTRAP BUTTON SIZE <p> <button class="btn btn-large btn-primary" type="button">large button</button> <button class="btn btn-large" type="button">large button</button> </p> <p> <button class="btn btn-primary" type="button">default button</button> <button class="btn" type="button">default button</button> </p> <p> <button class="btn btn-small btn-primary" type="button">small button</button> <button class="btn btn-small" type="button">small button</button> </p> <p> <button class="btn btn-mini btn-primary" type="button">mini button</button> <button class="btn btn-mini" type="button">mini button</button> </p>

27 ICON STYLING <i class="icon-search"></i> BOOTSTRAP

dokumen-dokumen yang mirip

PEMROGRAMAN WEB. Indra Gunawan, ST., M.Kom., CEH., CHFI

PEMROGRAMAN WEB. Indra Gunawan, ST., M.Kom., CEH., CHFI PEMROGRAMAN WEB Indra Gunawan, ST., M.Kom., CEH., CHFI Curiculum Vitae Pendidikan : S1 Teknik Informatika, Minat Studi Kecerdasarn Buatan, 2007, Universitas Islam Indonesia Yogyakarta Skripsi : Membuat