Pengenalan Sistem Grid

Sistem Grid

Selamat datang di tutorial ke-2 Bootstrap. Pada tutorial kali ini, saya akan membahas sistem grid dan tata letak di Bootstrap. Disarankan Untuk melihat postingan saya sebelum nya tentang cara Memasang dan Downlaod Bootstrap Dengan Click Link  ->>https://ngoding-gan.blogspot.com/2018/12/cara-mendownload-dan-menggunkan.html

Sistem grid memudahkan kita mengatur tata letak elemen di web. Zaman dulu, kebanyakan web menggunakan tag table untuk mengatur tata letaknya. Sekarang sudah tidak lagi. Karena kurang efektif dan tidak SEO friendly. Oleh karena itu, website zaman sekarang menggunakan CSS untuk mengatur tata letaknya.

Sistem grid di Bootstrap mengadopsi konsep tabel. Karena itu, Kita hanya perlu menggunakan tiga kelas untuk membuatnya. Kelas tersebut kita terapkan dalam tag <div>. Berikut ini tiga kelas yang dimaksud:

1. Kelas .container
2. Kelas .row
3. Kelas .col-

1. Kelas (class) .container

Classkontainer berfungsi membungkus konten web. Kelas ini sama fungsinya seperti tag <table> dalam pembuatan tabel. Ada dua jenis kelas .container: (1) Kelas .container yang ukuran lebarnya tetap (fixed) dan (2) kelas .container-fluid yang ukuran lebarnya mengikuti lebar browser.

Contoh nya : 

Maka Hasil Nya Akan Seperti Berikut : 

Konten web berpindah ke tengah, tidak lagi berada di tepi (samping). Itu disebabkan karena pengaruh dari kelas .container. Sekarang kita coba menggunakan kelas .container-fluid. Gantilah kelas container menjadi kelas container-fluid. Maka hasilnya akan seperti berikut ini:

Ukuran lebar kontainer akan mengikuti lebar browser. Coba saja perbesar ukuran browser, maka ukuran lebar kontainernya pun akan ikut berubah (membesar).

2. Kelas .row

Di dalam kelas .container ada kelas lagi, yaitu kelas .row. Fungsinya untuk membuat baris. Bila dibandungkan dengan tabel, kelas ini seperti tag <tr>. Kita harus membuat elemen div dengan kelas row di dalam kontainer. Jangan membuatnya di luar. Contohnya sebagai berikut:

3. Kelas .col-

Di dalam elemen row, ada kelas .col-. Fungsinya untuk membuat kolom. Bila dibandingkan dengan tabel, kelas .col- seperti tag <td>. Kelas .col- memiliki ukuran-ukuran:

1. col-xs- (Extra Small) untuk perangkat dengan layar kecil seperti ponsel;
2. col-sm- (Small) untuk perangkat dengan layar agak kecil seperti tablet;
3. col-md- (medium) untuk perangkat dengan layar sedang seperti laptop; dan
4. col-lg- (Large) untuk perangkat dengan layar besar seperti komputer (PC). 

Jadi, agar ukurannya sesui dengan perangkat yang digunakan, maka gunakanlah semuanya. Karena, sekarang website tidak hanya diakses melalui PC dan laptop saja. Namun, pada tutorial ini, kita sepakati menggunakan yang medium, yaitu col-md-.

Ada lagi ukuran yang harus diketahui, yaitu ukuran lebar kolom. Lebar kolom paling panjang adalah 12 dan paling pendek adalah 1. Untuk membuat kolom dengan lebar 12, kita cukup memanggil nama kelasnya .col-md-12. Pada dokumentasi Boostrap, sudah dijelaskan seperti ini:

Sekian Tutorial Kali ini Next akan ada Tutorial Membuat "Navigation"

Thanks

Read More

Cara Membuat Loading Web dengan HTML dan CSS

Membuat Loading Web dengan HTML dan CSS

Apa Itu HTML..?

   HTML adalah singkatan dari HyperText Markup Language yaitu bahasa pemrograman  standar yang digunakan untuk membuat sebuah halaman web, yang kemudian dapat diakses untuk menampilkan berbagai informasi di dalam sebuah penjelajah web Internet (Browser). 

Fungsi HTML

Membuat halaman web.

Menampilkan berbagai informasi di dalam sebuah browser Internet.

Membuat link menuju halaman web lain dengan kode tertentu (hypertext).

Apa Itu CSS..?

 Pada dasarnya CSS atau Cascading Style Sheet juga sama seperti HTML, PHP ataupun Javascript yakni suatu Bahasa pemrograman yang dibuat untuk menunjang fungsi website, namun masing – masing mereka memiliki porsi atau tugas yang berbeda.

Fungsi CSS

Fungsi dari adanya file CSS dalam setiap website kami rasa cukup penting. Sebelumnya juga sudah sempat dibahas bahwa dengan adanya CSS anda dapat membedakan konten atau style dengan dokumen atau file website itu sendiri. Bisa dibilang salah satu tolak ukur dari kualitas halaman website yang dibuat adalah dari style yang digunakan, dan disini CSS berperan sangat vital.

Keuntungan lain dari penggunaan file CSS adalah seakan – akan dapat dibuat menjadi library style yang bisa digunakan lagi sewaktu – waktu, tergantung dari anda untuk mengkreasikannya agar bentuk tampilan antar website yang dibuat tidak sama. Selain itu dengan adanya CSS seorang programmer web juga diberi kebebasan untuk berinovasi serta berkreasi seindah mungkin karena tidak ada batasan – batasan dari penggunaan kode CSS itu sendiri.

Kali ini saya akan memberikan tutorial cara membuat loading sederhana dengan HTML dan CSS

1. Siapkan text editor ( sublime,atom,dll )
2. Buat folder baru 
3. Setelah Buat Folder baru, buat file dengan nama " index.html ",
4. Sourcode nya ad di gambar berikut

Selanjut nya adalah Sourcode CSS nya

    Sintax Css nya dapat di tulis di halaman HTML nya langsung/bisa juga di halaman baru dengan membuat File baru dengan nama "style.css" lalu Hubungkan dengan dengan link

Kali ini saya menggunkan Css langsung pada halaman HTML nya langsung

Dan Hasil nya adalah Sebagai Berikut >>

Read More

Teknologi Jaringan Wireless

Teknologi Jaringan Wireless

Wireless merupakan media telekomunikasi tanpa kabel/nrikabel yang menggunakan gelombang electromagnetic sebagai media transmisi nya


Apa itu WI-FI 
     Wi-fi atau nama lainnya  IEEE 802.11 family adalah sebuah protocol jarinagan wireless yang populer dan banyak digunakan pada jaringan wireless

Wi-fi adalah sebuah merek dagang dari ( Wifi Alians ) Jadi bukan merupakan sebuah Singkatan

Apa itu IEEE
     --> Institute of Electronika dan Electronic and Engineers


Apa saja sih yang termasuk dalam IEE 802.11 familiy?
       protokol IEEE banyak digunakan secara umum. Berikut Daftarnya
. IEEE 802.11a -> frk 5,8 hz, tahun 1999 , kcp 58mbps
. IEEE 802.11b -> frek 2,4 hz , kcp-> 11mbps
. IEEE 802.11g -> frek 2.4 hz, kcp -> 54mbps  , tahun -> 2009
. IEEE 802.11n -> frek 2,4hz dan 5,8hz , kcp -> 300mbps


apa saja sih tipe radio antena jarinagn wireless
       secara garis besar anteana dibagi menjadi 2:

. Antena Omni-directoral -->
     Berfungsi Menyebarkan wifi kesegala arah

. Antena Directoral -->
   Berfungsi untuk menyebarkan jaringan fokus pada satu titik

       Antena directoral dibagi menjadi beberapa jenis :

1. Antena Grid

      Antenna Grid Wifi 2,4 GHz dengan Gain 21 Db, sangat cocok digunakan untuk Antenna Wifi Anda. Bisa digunakan untuk Point to Point, atau Klien dari Akses Point anda. Sangat cocok
digunakan untuk antenna Klien Rt-Rw Net anda sehingga bisa menekan biaya Investasi awal klien anda.
Antena grid memiliki kekuatan sinyal hingga 24 dB, sementara antena parabolic hingga 18 dB. menambah gain antena, namun akan membuat pola pengarahan antena menjadi lebih sempit.

    2. Yagi Antenna

         Antena Yagi adalah jenis antena radio atau televisi yang diciptakan oleh Hidetsugu Yagi. Antena ini dilengkapi dengan pengarah dan pemantul yang berbentuk batang.

Antenna Yagi terdiri dari tiga bagian, yaitu:
         Driven adalah titik catu dari kabel antenna, biasanya panjang fisik driven adalah setengah panjang gelombang dari frekuensi radio yang dipancarkan atau diterima.
Reflektor adalah bagian belakang antenna yang berfungsi sebagai pemantul sinyal,dengan panjang fisik lebih panjang daripada driven.Director adalah bagian pengarah antena, ukurannya sedikit lebih pendek daripada driven. Penambahan batang director akan

     3. Omni Antena

   

       Fungsi utama antena wireless adalah memperluas area coverage, bukan untuk memperkuat sinyal, fungsi penguat sinyal adalah pada radio atau access point, jadi antena wifi hanya mempunyai kekuatan penguat pasif, kekuatan antena adalah pada pemfokusan gelombang radio, dan semakin besar dBi dari antenna maka semakin luas atau jauh area coverage yang bisa dijangkau. Umumnya kualitas dari antena dilihat dari kualitas dari bahan pembuatnya, semakin bagus kualitas elemen yang ada di dalam antenna, maka semakin jauh pula jangkauannya dan konon bahkan bisa mereduksi dari noise atau interferensi yang timbul di sekitarnya. Makanya umumnya semakin mahal harga antena wireless semakin jauh pula jangkauannya.

   4. Antena Sectoral

    Antena Sectoral hampir mirip dengan antena omnidirectional. Yang juga digunakan untuk Access Point to serve a Point-to-Multi-Point (P2MP) links. Beberapa antenna sectoral dibuat tegak lurus , dan ada juga yang horizontal.

    Antena sectoral mempunyai gain jauh lebih tinggi dibanding omnidirectional antena di sekitar 10-19 dBi. Yang bekerja pada jarak atau area 6-8 km. Sudut pancaran antenna ini adalah 45-180 derajat dan tingkat ketinggian pemasangannya harus diperhatikan agar tidak terdapat kerugian dalam penangkapan sinyal.

Penerapan Penggunaan Wireless dalam kehidupan sehari-hari

1.    Sharing File 
Sama halnya pada jaringan kabel, koneksi melalui Wifi atau Bluetooth bisa juga dimanfaatkan untuk berbagi file antar sesama perangkat komputer pada jaringan.  Dengan menggunakan koneksi wifi maka perangkat Smartphone atau tablet yang tidak memiliki koneksi LAN melalui kabel UTP, dapat tersambung ke jaringan dan mengambil file atau berbagi file dengan komputer PC atau laptop tanpa harus menggunakan kabel data.
Antara komputer jenis PC dan laptop juga bisa saling berbagi file dengan koneksi wireless, tanpa harus ada kabel LAN ( cross ) yang tercolok di antara kedua jenis komputer tersebut.

2.    Sharing Printer
Agar printer bisa dipakai secara bersama-sama maka syarat utamanya adalah printer tersebut harus tersambung ke jaringan, perkembangan terakhir dari teknologi printer bahwa perangkat printer sudah bisa terkoneksi langsung ke LAN dengan menggunakan kabel LAN dan juga menggunakan koneksi WiFi. Berbagi printer dengan koneksi Wifi tentunya tidak ada bedanya dengan berbagi printer saat menggunakan koneksi kabel, sama saja yang terpenting antara komputer dan printer harus terkoneksi terlebih dahulu.

3.    Berbagi Koneksi Internet
Koneksi ke internet bisa juga dibagi ke semua anggota LAN dengan koneksi wifi. Membagi koneksi internet pada jaringan wifi tidak jauh berbeda dengan koneksi pada jaringan kabel. Pertama, harus ada sumber internet. Kedua, sumber internet harus memiliki koneksi ke jaringan wireless.

4.    Game on line Via WiFi
Bermain sebuah game bersama-sama dengan beberapa anggota komputer yang terhubung ke LAN bisa juga dilakukan melalui jaringan wireless.  Kekuatiran yang timbul adalah terkait dengan kapasitas bandwidth yang tidak mencukupi, namun teknologi wifi saat ini sudah cukup bisa untuk mengatasi problem wifi tersebut.

5.    Mengatur peralatan Audio Video 
Peralatan elektronik seperti TV dan Sound Sistem juga sudah tersedia dengan koneksi wifi. Dengan begitu maka kita pun bisa mengatur peralatan-peralatan non komputer melalui perangkat komputer dan gadget kita.

Sekian sedikit materi tentang Wireless

Terimakasih :)

Read More

Hosting Domain

Domain

        Domain adalah Buat penamaan website supaya lebih mudah di cari oleh pengguna

          Contoh Domain 

1. Domain.com

Domain .com merupakan top level domain pada Domain Name System. Nama .com diambil dari kata commercial, yang awalnya ditujukan untuk organisasi komersial, namun kemudian dibuka untuk tujuan umum. Contohnya ialah google.com, youtube.com, facebook.com dan masih banyak lagi.

2. Domain .net

Domain .net juga merupakan generic top level domain pada Domain Name System. Nama .net diambil dari kata network, yang awalnya ditujukan untuk organisasi yang bergelut dalam teknologi jaringan seperti penyedia layanan internet dan perusahaan infrastruktur lainnya. Namun kemudian batasan tersebut tidak dipatuhi sehingga penggunaan domain .net menjadi terbuka untuk tujuan umum dan menjadi alternatif lain sebagai pengganti domain .com. Contohnya telkom.net, flagpedia.net, asp.net dan masih banyak lagi.

3. Domain .org

Domain .org juga merupakan generic top level domain pada Domain Name System. Nama .org diambil dari kata organization, yang awalnya ditujukan untuk organisasi yang bersifat non-profit. Namun kemudian batasan tersebut tidak diberlakukan dan telah dihapus, sehingga domain ini dapat digunakan secara umum, biasanya digunakan oleh sekolah, poyek yang bersifat opensource, komunitas dan juga dapat digunakan untuk hal yang berprofit. Contohnya wikipedia.org, opensource.org, sgiaedu.org dan masih banyak lagi.

 Baiklah Disini saya akan memberikan vidio tutorial cara hosting domain dengan "zone.id"

Read More

Cara Mendownload Dan Menggunkan Framework Bootstrap Pada HTML

Bootstrap

     Bootstrap adalah sebuah library framework CSS yang dibuat khusus untuk bagian pengembangan front-end website. Bootstrap juga merupakan salah satu framework HTML, CSS dan javascript yang paling populer di kalangan web developer yang digunakan untuk mengembangkan sebuah website yang responsive. Sehingga halaman website nantinya dapat menyesuaikan sesuai dengan ukuran monitor device (desktop, tablet, ponsel ) yang digunakan pengguna disaat mengakses website website dari browser.

   

  Baiklah kali ini saya akan memberikan tutorial cara mendownload Bootstrap dan memasukkan nya ke dalam HTML

Yang Pertama harus dilakukan adalah mendownload Freamwork Bootstrap dengan cara

Yang Kedua buat folder baru, lalu ekstrak file yang sudah di download ke dalam file baru tersebut,  lalu drag folder yang di buat ke dalam sublime , buat file baru dengan nama "index.html" 

Bukak kembali browser lalu salin scritp yang telah di sediakan, kalau tulisan hello word sudah tampil seperti contoh, maka anda telah berhasil

Next vidio kita akan belajar cara membuat navigation Bootstrap

Read More