Tutorial Cara Penggunaan Framework (Bootstrap dan Jquery)
Bootstrap adalah sebuah library framework CSS yang dibuat khusus untuk pengembangan front-end website.bagaimana menggunkannya / menginstallnya?
1 Untuk caranyanya pertama anda harus mendownload bootsrapnya tersebut di alamat aslinya https://getbootstrap.com/docs/3.3/getting-started/
atau anda bisa download di sini ya :)
PASSWORDNYA : tiwisilvia
2. Setelah itu melakukan penginstalan boostrap secara offline, lalu setelah anda
mendownloadnya kemudian ekstrak file bootstrap dan masukkan kedalam foldel
project anda,dan simpan file bootsrapnya di folder CSS seperti gambar di bawah
ini:
3. Kemudian untuk menghubungkan atau menginstal bootsrap buat sebuah file HTML dan PHP yang akan kita hubungkan dengan bootsrap. Disini saya membuat index.php, script nya silahkan lihat dibawah ini:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title> TIWI'S WEB </title>
5. <meta charset="utf-8">
6. <meta name="viewport" content="width=device-width, initial-scale=1">
7. <link rel="stylesheet" href="asset/css/bootstrap.min.css"><!-- CSS Boostrap -->
8. </head>
9. <body>
10. <nav class="navbar navbar-inverse">
11. <div class="container-fluid">
12. <div class="navbar-header">
13. <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
14. <span class="icon-bar"></span>
15. <span class="icon-bar"></span>
16. <span class="icon-bar"></span>
17. </button>
18. <a class="navbar-brand" href="#"> MENU </a>
19. </div>
20. <div class="collapse navbar-collapse" id="myNavbar">
21. <ul class="nav navbar-nav">
22. <li ><a href="index.php"> HEADLINES </a></li>
23. <li ><a href="seleb.php"> Celebrities</a></li>
24. <li><a href="#"> Fashion & beauty </a></li>
25. <li><a href="#"> Music</a></li>
26. </ul>
27. <ul class="nav navbar-nav navbar-right">
28. <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
29. </ul>
30. </div>
31. </div>
32. </nav>
33. <div class="container">
34. <!-- Projects Row -->
35. <div class="row">
36. <div class="col-md-4 portfolio-item">
37. <a href="#">
38. <img class="img-responsive" src="asset/img/trend.jpg" alt="">
39. </a>
40. <h3>
41. <a href="#">Makin Unik & Aneh:Tren Kecantikan Terbaru Alis Petir, Kamu Berani Coba?</a>
42. </h3>
43. <p> Ladies, beberapa saat yang lalu kamu pasti sudah melihat tren-tren alis yang super unik. Setelah tren alis wavy alias gelombang jadi viral dan ditiru banyak orang termasuk para selebriti, kini muncul lagi satu bentuk alis yang unik. Alis ini disebut juga dengan alis petir...</p>
44. </div>
45. </div>
46. <br>
47. <br>
48. <br>
49. <!-- /.row -->
50. <footer>
51. <div class="row">
52. <div class="col-lg-12">
53. <p>Copyright © TIWI SILVIA 2017</p>
54. </div>
55. </div>
56. <!-- /.row -->
57. </footer>
58. </div>
59. <script src="asset/js/jquery.min.js"></script><!-- Latest compiled JavaScript -->
60. <script src="asset/js/bootstrap.min.js"></script><!-- jQuery library -->
61. </body>
62. </html>
|
maka hasilnya akan seperti ini:
4. Setelah itu kita akan me-link kan file bootsrap nya , seperti di line ke-7 pada table di atas
lalu ketik [ localhost/(lalu tulis project anda)]
4. Setelah itu kita akan me-link kan file bootsrap nya , seperti di line ke-7 pada table di atas
5. Setelah itu menambahkan file bootsrap pada file HTML dan PHP, maka
selanjutnya kita juga akan menambahkan script / CSS nya JQuery, dengam
menambahkan scrip seperti pada table di atas line ke 59 dan 60
Semua sudah terpasang, kemudian kita melakukan percobaan dengan menjalankan file php tersebut di browser. Ikutilah langkah dibawah ini:
5.1. Buka XAMPP dan aktifkan apache dan MySQL Nya
5.2 Lalu ke browser untuk buka website (ofline) anda , lalu ketik [ localhost/(lalu tulis project anda)]
SEKIAN. TERIMAKASIH . SELAMAT MENCOBA :)
Baca juga ya yang ini :) =>TUTORIAL CARA MEMBUAT WEBSITE SEDERHANA
Matakuliah
|
Praktikum
Pemograman Web
|
Dosen
|
Muhamad
Ropianto,M.Kom.
|
Asistent
Dosen
|
JOHN DHAINI
|
0 komentar:
Post a Comment