”Mencari ilmu itu adalah wajib bagi setiap muslim laki-laki maupun muslim perempuan”. (HR. Ibnu Abdil Barr)

Tuesday, 9 October 2018

Bootstrap Components

      , ,       No comments    

- Bootstrap Components -


- Meta Viewport.
Meta Viewport berfungsi sebagai "intruktur" browser untuk melakukan perubahan skala pada dimensi layar browser istilah kerennya "responsive", berikut script meta viewport.

<meta name="viewport" content="width=device-width, initial-scale=1">

Letakan script tersebut dibawah <title></title>.


 - Navigation Bar (NavBar)
Banyak jenis navbar yang disediakan oleh Bootstrap tapi yang saya gunakan adalah navbar dibawah ini.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Letakkan script tersebut dibawah <body>
Maka akan muncul tampilan seperti dibawah ini

*tampilan desktop*

*tampilan mobile*


- Carousel
Carousel sebuah script untuk menampilkan gambar yang dapat berganti-ganti, tujuan untuk memperindah tampilan website kita.

Berikut scriptnya
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="image/mesjid1.png">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="image/mesjid2.png">    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="image/mesjid3.png">    </div>
  </div>
</div>

Letakan script carousel ini dibawah </nav> pastikan src="image/mesjid1.png" merupakan lokasi tempat gambar teman-teman berada dan jangan lupa format gambarnya (jpg, jpeg, png, dll), caranya sama seperti mau memasukan gambar pada tutor sebelumnya, dapat dilihat >>DISINI<<

Maka hasilnya akan seperti ini.


- Card
Hampir sama seperti Carousel bedanya card ini berukuran kecil dan tidak bergerak-gerak.
Berikut scriptnya.
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="image/mesjid2.png" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Letakan dibawah </body>, jangan lupa untuk merubah src="image/mesjid2.png" menjadi lokasi tempat gambar teman-teman jangan lupa format gambarnya dan jangan lupa merubah judul dan deskripsi cardnya, jika teman-teman ingin merapihkan agar ada jarak antara konten dengan komponen lainnya bisa menggunakan perintah <br> atau <hr> sebelum atau sesudah konten.
Maka tampilannya akan menjadi seperti ini.


Sekian tutorial dari saya, jika ada kesalahan mohon maaf (^.^)v.

Share:

Saturday, 6 October 2018

How to Make Database and Table on phpMyAdmin

      , , ,       No comments    

- Database -

Kita tidak usah membahas lebih detail apa itu phpMyAdmin, teman-teman bisa mencari pengertiannya di Wikipedia.
Baik langsung saja langkah awalnya adalah buka browser teman-teman, dan ketikkan di tab url nya http://localhost/phpmyadmin/.
Lalu klik "New"
Setelah itu akan muncul tampilan seperti ini
Masukan nama Database yang teman-teman inginkan disini saya menuliskan "mydatabase" sebagai nama Databasenya, lalu klik "Create"

Setelah di create maka akan muncul di bagian list database, nama dari database yang kita buat.
Klik database yang kita buat tadi, maka akan muncul tampilan
Masukan nama tabelnya dan berapa banyak kolom yang ingin kita gunakan, kolom berfungsi sebagai tempat nilai dari sebuah tabel yang nantinya akan menjadi output di program, klik "Go" dan akan muncul tampilan seperti ini
Keterangan:
1. Kotak Biru: Kolom Nama, berfungsi sebagai tempat field
2. Kotak Merah: Kolom Type, kolom yang terdiri dari tipe-tipe data biasanya utk program2 simple hanya menggunakan tipe data integer(int)(hanya angka) dan varchar(huruf, angka, dan spesial karakter).
3. Kotak Hijau: Kolom Value, berfungsi sebagai jumlah digit yang dipakai untuk input data
4. Kotak Ungu: Auto Increment(A.I) dan Primary Key

Setelah teman-teman memasukan nama, type, dan value pada tabel yang telah teman-teman buat klik "Save", maka akan muncul di list databasenya submenu tabel.
 Dimana jika kita klik tabelnya akan muncul field seperti gambar dibawah ini
Sekian tutorial dari saya, jika ada kesalahan mohon maaf (^.^)v.

Share:

Thursday, 4 October 2018

Bootstrap Layout & Content

      , ,       1 comment    

- Bootstrap -

STEP 1. Mendownload Bootstrap
Langkah awal yang harus kita lakukan sebelum memulai pembahasan kali ini adalah mendownload framework Bootstrapnya terlebih dahulu, teman-teman dapat mendownloadnya dengan mengklik tombol download dibawah ini atau dapat langsung mengunjungi website resmi Bootstrap tersebut.


Setelah proses download selesai buka folder program teman-teman buat folder baru dengan nama "asset" dan buat di dalam folder assetnya folder "css" dan "js".


STEP 2. Menambahkan Css dan JavaScript

Pertama kita buka sublime kita dan buat script css terlebih dahulu,
body{color:grey;}
#Warna opsional :), save didalam folder css dengan format "mystyle.css"

Setelah selesai, save code script yang ada dari ke-4 link dibawah ini
1. https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css (save di folder css)
2. https://code.jquery.com/jquery-3.3.1.slim.min.js (save di folder js)
4. https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js (save di folder js)

Setelah selesai mendownload(men-save) code script diatas, buka "index.php" kita dan buat script seperti dibawah ini

<!DOCTYPE html>
<html>
<head>
 <title>Keinformations</title>
 <link rel="stylesheet" type="text/css" href="asset/css/mystyle.css">
 <link rel="stylesheet" type="text/css" href="asset/css/bootstrap.min.css">
</head>
<body>
 <h1>Hei Dude</h1>




<script type="text/javascript" src="asset/js/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="asset/js/pooper.min.js"></script>
<script type="text/javascript" src="asset/js/bootstrap.min.js"></script>
</body>
</html>

Note: Pastikan susunan scriptnya berurutan seperti yang dicontohkan

 STEP 3. Menambahkan Grid pada Program

Kita harus tau bahwasanya jumlah kolom keseluruhan layar browser kita adalah 12 kolom



Dan fungsi grid disini adalah untuk membagi wilayah antara kolom tersebut, dari gambar diatas kita akan membagi kolomnya menjadi 2 bagian (6 kolom kiri dan 6 kolom kanan), memakai script seperti dibawah ini

<!DOCTYPE html>
<html>
<head>
 <title>Keinformations</title>
 <link rel="stylesheet" type="text/css" href="asset/css/mystyle.css">
 <link rel="stylesheet" type="text/css" href="asset/css/bootstrap.min.css">
</head>
<body>
 <h1>Hei Dude</h1>
<div class="row">
  <div class="col-6">.col-6</div>
  <div class="col-6">.col-6</div>
</div>


<script type="text/javascript" src="asset/js/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="asset/js/pooper.min.js"></script>
<script type="text/javascript" src="asset/js/bootstrap.min.js"></script>
</body>
</html>
Sekian tutorial dari saya, jika ada kesalahan mohon maaf (^.^)v.
Share:

Monday, 1 October 2018

Simple Tag HTML

      , , , ,       1 comment    

- Struktur HTML -

Langkah awal untuk membuat program web adalah kita harus membuat struktur HTML terlebih dahulu, dengan mengetik perintah.
<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>

</body>
</html>

- Tag Title -

Masuk ke sesi Tag Title dimana perintah ini berfungsi untuk menampilkan title pada tab browser kita kita bisa menggunakan perintah.
<!DOCTYPE html>
<html>
<head>
 <title>Keinformations</title>
</head>
<body>

</body>
</html>
Maka akan muncul hasil seperti gambar diatas.

- Heading Text -

Lalu untuk sesi Heading Text kita bisa mengetikan perintah.
<!DOCTYPE html>
<html>
<head>
       <title>Keinformations</title>
</head>
<body>
<h1>Hei Watsupp?!</h1>
<h2>Hei Watsupp?!</h2>
<h3>Hei Watsupp?!</h3>
<h4>Hei Watsupp?!</h4>
<h5>Hei Watsupp?!</h5>
</body>
</html>
Perlu diketahui semakin tinggi nilai <h> nya maka tulisan yang akan muncul akan semakin kecil.

Dan hasilnya akan seperti gambar diatas.

- Insert Image -

Pada sesi ini kita akan melakukan penginputan image(gambar).

Kita harus tau di folder mana kita menyimpan gambar yang akan kita input, kita dapat melihatnya di link MyComputer, kita dapat lihat imagenya berada di keinformations > asset > img > keinformations.png.

Gambar diatas adalah gambar yg akan kita input

Untuk perintah programnya kita dapat mengetikan perintah.
<!DOCTYPE html>
<html>
<head>
       <title>Keinformations</title>
</head>
<body>
<img src="asset/img/keinformations.png">
</body>
</html>
Dan hasil akhirnya akan tampak seperti gambar diatas.

- Hyperlink -


Sesi Hyperlink dimana kita akan memasukan suatu link dalam text ataupun image.
Kita dapat memberi perintah.

<!DOCTYPE html>
<html>
<head>
       <title>Keinformations</title>
</head>
<body>
<a href="https://keinformations.blogspot.com">Click This!!</a>
</body>
</html>
Dan akan muncul tulisan biru yang dapat diklik.

Dan jika diklik kita akan dibawa ketempat yang dituju.

- Ordered List -

Ordered List kita dapat melakukan perintah.
<!DOCTYPE html>
<html>
<head>
       <title>Keinformations</title>
</head>
<body>
        <h4>List Pemrograman Web</h4>
        <ol>
               <li>HTML</li>
               <li>CSS</li>
               <li>JAVASCRIPT(JS)</li>
               <li>PHP</li>
               <li>MySQL</li>
       </ol>
</body>
</html>
Maka akan muncul list-list seperti gambar diatas.

- Unordered List -

Hampir sama dengan Ordered List, bedanya Unordered List menggunakan <ul></ul>.
<!DOCTYPE html>
<html>
<head>
       <title>Keinformations</title>
</head>
<body>
        <h4>List Pemrograman Web</h4>
        <ul>
               <li>HTML</li>
               <li>CSS</li>
               <li>JAVASCRIPT(JS)</li>
               <li>PHP</li>
               <li>MySQL</li>
       </ul>
</body>
</html>
Maka akan muncul list-list seperti gambar diatas (bedanya unordered list tidak menggunakan angka).

- Table -

Table, salah satu perintah yang sering digunakan berfungsi agar tampilan list tampak lebih rapi kita dapat menggunakan perintah.
<!DOCTYPE html>
<html>
<head>
   <title>Keinformations</title>
</head>
<style type="text/css">
 table, th, td {
  border: 1px solid red;
 }
</style>
<body>
 <h4>List Pemrograman Web</h4>
  <table>
  <tr>
   <th>No</th>
   <th>Nama</th>
  </tr>
  <tr>
   <td>1</td>
   <td>Hypertext Text Markup Language (HTML)</td>
  </tr>
 </table> 
</body>
</html>
Hasil akhirnya akan seperti gambar diatas, kita bisa menambahkan baris lagi dengan menambahkan.
<!DOCTYPE html>
<html>
<head>
   <title>Keinformations</title>
</head>
<style type="text/css">
 table, th, td {
  border: 1px solid red;
 }
</style>
<body>
 <h4>List Pemrograman Web</h4>
  <table>
  <tr>
   <th>No</th>
   <th>Nama</th>
  </tr>
  <tr>
   <td>1</td>
   <td>Hypertext Text Markup Language (HTML)</td>
  </tr>
  <tr>
   <td>2</td>
   <td>Contoh Tambahan</td>
  </tr>
 </table> 
</body>
</html>
Sekian tutorial dari saya, jika ada kesalahan mohon maaf (^.^)v.

Share:
Copyright © Keinformations | Powered by Kein Groups Free Share Sertakan Sumber