Web Programming
Pengantar
Sebelum Mempelajari Pemrograman Web, Umumnya anda harus mempelajari beberapa hal sebagai pengantar kedepannya agar mempermudah dalam mempelajari Pemrograman Web diantaranya ialah fundamental dasar bahasa pemrograman dan beberapa pengantar serta pendahuluan.
Pendahuluan
Pendekatan yang digunakan di awal, siswa diajak untuk mengenali program-program kecil yang isinya adalah elemen pembangun program: ekspresi, assignment, kondisional dan loop. Pada kenyataannya, sebuah program mengandung campuran dari elemen pembangun tersebut dan diantaranya digabungkan dan dikombinasikan dengan bahasa markup dan bahasa pemrograman lain. Siswa perlu meramu dan mengintegrasikan pengetahuan dengan “membongkar” sebuah program contoh dan mengambil elemennya untuk diadaptasi kemudian mengkonstruksi kembali sebuah program utuh untuk menyelesaikan persoalan yang dihadapinya.
Ini adalah hakekat dari Computational Thinking (Berpikir secara Komputasi). Dekomposisi persoalan dilakukan dengan memecah program menjadi bagian kecil elemen sintaktikal, untuk membentuk solusi yang utuh. Pattern (pola) diharapkan dapat terbentuk mulai dari elemen dasar sintaktikal yang dipelajari melalui program kecil, menuju pola solusi untuk jenis-jenis persoalan pembangun persoalan lebih besar.
Dengan dasar pemikiran dan pendekatan tersebut, Memulai Pemrograman Web dengan ini terdiri atas beberapa modul.
- Pendahuluan: Memperkenalkan sejarah Pemrograman Web, contoh aplikasi, dan istilah-istilah yang dipakai. Juga dibahas IDE (Integrated Development Environment) serta menginstall dan menggunakan server secara lokal.
- Bahasa Markup: Mengenalkan bahasa markup beserta dasar-dasar dari bahasa markup seperti Markdown, HTML, dan CSS.
- Script: Mengenalkan script yang digunakan dalam Pemrograman Web seperti JavaScript/EcmaScript.
- Bahasa Pemrograman Web: Mengenalkan bahasa pemrograman yang digunakan untuk membangun sebuah web yaitu PHP.
- Instruksi Kondisional: Mengenalkan instruksi kondisional agar program dapat berjalan sesuai alur yang ditetapkan.
- Instruksi Perulangan: Mengenalkan instruksi perulangan agar program dapat mengulangi instruksi secara berulang, seperti for, dan while yang sering digunakan dalam pengambilan data.
- Array-Tabel: Mengenalkan array untuk menyimpan banyak nilai dalam suatu bentuk matriks.
- Subprogram: Mengenalkan subprogram fungsi dan prosedur, yaitu sebuah abstraksi suatu proses komputasi yang dapat dipanggil oleh sebuah program.
- Penutup: Menguji pemahaman mengenai pemrograman web melalui latihan-latihan untuk memperdalam konsep pemrograman web dalam sebuah program sederhana, seperti instruksi kondisional, instruksi perulangan, tabel atau array, serta fungsi dan prosedur.
Pembelajaran Pemrograman Web ini akan lebih banyak melakukan praktik dengan komposisi persentase kelas sebagai berikut, 20% Materi & Teori dan 80% merupakan praktik. Sehingga waktu untuk menulis kode lebih banyak daripada teori atau materi.
Pengenalan Pemrograman Web
Pemrograman Web merupakan salah satu disiplin ilmu dari percabangan ilmu komputer dengan spesialisasi yang lebih difokuskan dalam pengembangan sebuah situs di internet.
Dengan adanya pemrograman web, terjadinya revolusi digitalisasi berbagai elemen bisnis yang ada saat ini. salah satu contoh diantaranya adalah adanya situs-situs di internet yang mulai tersebar diseluruh jaringan internet dunia pada awal tahun 2000an
HTML (Hyper Text Markup Language)
HTML diciptakan oleh Sir Tim Berners-lee pada akhir tahun 1991 namun tidak dirilis secara resmi. Sir Tim Berners-lee merilis HTML versi pertama pada tahun 1993 dengan tujuan untuk berbagi informasi yang dapat dibaca dan diakses melalui web browser.
Anda bisa cek materi HTML disini Click Here
CSS (Cascading Style Sheet)
CSS pertama kali diusulkan oleh Håkon Wium Lie pada 10 Oktober 1994, pada saat itu, Lie sedang bekerja dengan Tim Berners-Lee di CERN. beberapa bahasa style sheet lain untuk web diusulkan pada waktu yang hampir bersamaan, dan pada World Wide Web Consortium menghasilkan Rekomendasi W3C CSS (CSS1) pertama yang dirilis.
Anda bisa cek materi CSS disini Click Here
JavaScript
JavaScript merupakan salah satu jenis Bahasa Script yang pertama kali dikembangkan oleh Brendan Eich dari Netscape di bawah nama Mocha pada tahun 1995, yang nantinya namanya diganti menjadi LiveScript, dan akhirnya menjadi JavaScript. Navigator sebelumnya telah mendukung Java untuk lebih bisa dimanfaatkan para pemrogram yang non-Java.
EcmaScript
EcmaScript Merupakan sebuah standar dalam pembuatan Bahasa Script, JavaScript dibuat mengikuti pedoman dan aturan dari EcmaScript.
Anda bisa cek materi JS disini Click Here
PHP
Bahasa Pemograman PHP ditemukan pada tahun 1994 oleh Rasmus Lerdorf versi pertama PHP tidak dirilis ke publik, melainkan digunakan oleh Rasmus Lerdorf untuk melacak siapa saja yang melihat resume onlinenya pada homepage websitenya. dan hingga kini digunakan sebagai bahasa pemrograman web paling populer didunia.
Anda bisa cek materi JS disini Click Here
SQL (Structured Query Language)
SQL (Structured Query Language) adalah bahasa pemrograman yang digunakan untuk mengakses, mengelola, dan memanipulasi data dalam sistem manajemen basis data relasional (RDBMS). Ini memungkinkan pengguna untuk membuat, memodifikasi, dan menghapus database dan tabel, menjalankan kueri untuk mengambil data, dan mengelola izin pengguna.
Anda bisa cek materi SQL disini Click Here
XAMPP
Merupakan sebuah bundle local server untuk digunakan sebagai perangkat pengembangan situs website sederhana. XAMPP banyak digunakan oleh Web Developer Pemula sebagai langkah awal untuk mendevelop situs website secara lokal tanpa harus membeli sebuah server.
Visual Studio Code
Untuk Editor yang direkomendasikan dalam pemrograman web, ialah Visual Studio Code. Dengan berbagai extension yang tersedia dapat membantu kita untuk melakukan pengembangan website dengan baik serta efektif.
Pengantar Dasar Algoritma Pemrograman
Untuk memulai memahami algoritma pemrograman serta menulis sebuah kode program, kita perlu memahami dasar sebagai pengantar agar kedepannya kita dapat dengan mudah mempelajari dan mengikuti materi yang ada.
Cara Menulis dan Membaca
Dalam menulis program, hal pertama yang perlu diperhatikan ialah cara membaca dan menulis kode program. Sama seperti kita membaca dan menulis pada umumnya. Dalam membaca dan menulis kode program, konsep yang digunakan ialah konsep membaca dan menulis dari atas menuju kebawah. Terkadang hal tersebut disepelekan dan justru berakibat fatal dalam menulis kode program, karena akan mengakibatkan error pada program. Hal itu disebabkan oleh urutan program yang tidak sesuai dalam mengikuti kaidah/konsep penulisan dari atas kebawah. Komputer akan membaca kode program kita secara berurutan dari atas hingga kebawah sehingga jika cara menulisnya tidak berurutan dan tidak beraturan akan mengakibatkan error yang fatal. Hal yang sederhana namun terbilang sangat penting. Itulah sebabnya diperlukan pemahaman dasar dalam menulis kode program.
Pentingnya Dokumentasi
Dalam mempelajari bahasa pemrograman kita perlu membaca dokumentasi resmi agar meminimalisir kesalahan serta error yang terjadi nantinya. Setiap bahasa pemrograman pasti memiliki standar berbeda-beda dalam penulisannya, oleh sebab itu dokumentasi sangat wajib, penting serta perlu dibaca. Anda bisa mencari dokumentasi resmi setiap bahasa pemrograman yang Anda pelajari di internet.
Indentasi & Blok Program
Indentasi merupakan memulai teks dengan spasi kosong di antara teks dan margin. Tab digunakan sebagai indentasi, dan jumlah karakter dalam tab adalah 4 karakter spasi. Biasanya indentasi akan digunakan di dalam blok program. Terkadang beberapa programmer di seluruh dunia menggunakan indentasi yang berbeda-beda menyesuaikan dari setiap standar proyeknya. Biasanya dalam proyek individual sering ditemui programmer yang menggunakan indentasi dengan 2 karakter spasi. dan dalam beberapa kasus seperti proyek pembuatan kernel linux yang diinisiasi oleh Linus Torvalds menggunakan standar indentasi dengan 8 karakter dengan tujuan untuk mempermudah keterbacaan blok kode program. Dan untuk yang paling umum serta paling banyak digunakan ialah indentasi dengan 4 karakter spasi dengan menyesuaikan jumlah karakter dalam tab.
Dalam bahasa pemrograman blok program ialah sebuah pendekatan pemrograman yang memungkinkan pengguna untuk membuat program dengan menyusun balok-balok kode yang saling berhubungan. Blok program dalam bahasa pemrograman umumnya diawali dengan tanda buka kurung kurawal “{“ serta diakhiri dengan tutup kurung kurawal “}”. Dalam beberapa kasus bahasa pemrograman lain seperti Python, kurung kurawal tidak merepresentasikan/mewakilkan keadaan blok program, tetapi menggunakan simbol lain seperti “:”.
Untuk mendeklarasikan blok program (dari { ke } ) adalah seperti yang ditunjukkan dalam contoh berikut, dan sintaksnya dijelaskan setelah indentasi “{“ “}”.1
2
3
4
5for ( i of c_list_passPhraseList )
{ //Memasuki Blok Program
[Tab]<Code>
[Tab]<Code>
} //Mengakhiri Blok Program
1 | <div> <!-- Memasuki Blok Program --> |
Berikut ini contoh blok program yang terdapat didalam blok program (blok program bersarang):1
2
3
4
5
6
7
8
9function fs_f_authAPI( l_list_acc )
{ //Memasuki Blok Program 1
[Tab]for ( i of l_list_acc )
[Tab]{ //Memasuki Blok Program 2
[Tab][Tab]<Code>
[Tab][Tab]<Code>
[Tab]} //Mengakhiri Blok Program 2
[Tab]return OK_CMD;
} //Mengakhiri Blok Program 1
1 | <div> <!-- Memasuki Blok Program 1 --> |
Komentar
Dalam menulis kode program, terkadang kita perlu menambahkan komentar dalam beberapa bagian tertentu sebagai keterangan. Mengapa demikian? Coba pikirkan jika Anda bekerja dalam tim dan tim Anda mengerjakan program yang cukup rumit dan kompleks tetapi Anda justru hanya menulis program tanpa adanya keterangan komentar. Bagaimana dengan teman tim Anda yang nantinya meneruskan pekerjaan Anda? Tentu saja akan menyulitkan tim Anda dalam meneruskan pekerjaan Anda nantinya. Itulah pentingnya sebuah komentar dalam menulis sebuah program. Komentar dalam bahasa pemrograman dapat dibuat hanya untuk sebaris atau lebih dari satu baris. Jika hanya sebaris, umumnya komentar dapat diawali dengan “//“ tanpa ada akhiran. Tetapi jika Anda ingin memasukkan komentar lebih dari satu baris, umumnya komentar diawali dengan “/“ dan diakhiri dengan “/“. Dalam bahasa pemrograman lain terkadang terdapat perbedaan, diantaranya python yang menggunakan awalan komentar “#” untuk komentar sebaris. Jadi jika Anda berniat mempelajari bahasa pemrograman lain harap baca kembali setiap dokumentasi bahasa pemrograman lain agar tidak salah menuliskan sintaksis komentar.
Berikut Contoh penggunaan komentar:1
2
3
4
5
6
7
8
9
10if( filePtr == null )
{ //Komentar Sebaris
/* Komentar
Lebih
Dari
Satu Baris */
return ERR_CMD;
}
1 | <!-- Ini Komentar Dalam HTML --> |
Note: Komentar sebaris “//“ tidak dapat digunakan dalam Bahasa C, jadi untuk membuat komentar sebaris dalam bahasa C gunakan “/ /“. Komentar sebaris “//“ masih dapat digunakan dalam bahasa pemrograman C++.
Aturan Penamaan
Dalam mempelajari bahasa pemrograman kita perlu memperhatikan dalam aturan penulisan nama variabel, fungsi, kelas, dsb. Aturan penamaan sebagian besar sama serta untuk mempermudah kita dalam membaca kode programnya nanti. Ada tiga hal penting yang perlu diperhatikan dalam aturan penamaan:
- Beri penamaan yang dapat membedakan setiap jenis tipe data.
- Gunakan katakunci tipe data sebagai parameter penamaan untuk mengetahui isi tipe data setelah sebuah variabel/fungsi/kelas dideklarasikan, selain itu akan meminimalisir terjadinya kesalahan.
- Beri penamaan yang mudah dikenali dan dipahami (jangan gunakan singkatan yang hanya diketahui oleh Anda dan Tuhan Anda seperti x = 5).
Ada hal penting lain yang harus Anda ketahui saat membuat nama:
- Gunakan aturan penamaan ini sebagai acuan umum dan bila perlu sesuaikan aturan penamaan dengan bahasa pemrograman yang Anda gunakan, karena setiap bahasa pemrograman juga memiliki aturan penamaan yang berbeda (Baca Dokumentasi Resmi!).
- Jangan menuliskan nama yang sama dengan kata kunci (if, else, for, while, dll), karena akan menimbulkan error dan tidak dapat dibaca oleh suatu program.
- Hindari penggunaan inisial seperti penggunaan satu huruf saja pada penamaan variabel/fungsi/kelas pada program yang rumit, karena akan membingungkan dan sulit dibedakan.
- Jangan mengawali nama variabel/fungsi/kelas dengan angka, karena ini akan membuat kompiler membacanya sebagai nilai, bukan variabel/fungsi/kelas. Oleh karena itu, jika variabel/fungsi/kelas kita memerlukan angka di dalamnya, maka angka tersebut tidak boleh diletakkan di awal.
- Hindari memberi nama variabel/fungsi/kelas dengan istilah umum seperti “data”. Menamakannya “data” tidak menjelaskan apa pun. Namanya akan membuat Anda bingung ketika melakukan pemeliharaan kode ataupun membuat fitur baru nantinya. Sebagai gantinya, gunakan nama yang menggambarkan nilai variabel/fungsi/kelas itu sendiri.
- Variabel dalam Bahasa Pemrograman seperti JavaScript dan lain-lain hanya boleh diawali dengan huruf atau garis bawah. Anda tidak dapat membuat variabel dengan awalan angka atau menggunakan simbol selain garis bawah.
- Nama variabel/fungsi/kelas tidak boleh mengandung spasi. Jika nama variabel/fungsi/kelas lebih dari dua kata, maka gunakan format camelCase seperti ini: NamaDepan, NamaBelakang, NamaKucing atau Anda bisa menggunakan underscore “_” sebagai pengganti spasi jika tidak ingin menggunakan metode camelCase seperti: Nama_Depan, Nama_Belakang.
- Nama variabel/fungsi/kelas tidak boleh mengandung karakter khusus (!,/,+,*,= dan lain-lain).
- Hindari kebiasaan membuat nama/menamai variabel/fungsi/kelas menggunakan huruf kapital semua seperti: NAMA, TEMPAT, NYAWA, dsb. Umumnya nama variabel dengan huruf kapital seperti pada contoh tadi digunakan untuk membuat variabel yang bersifat constant/mutlak (nilai yang tidak dapat diubah).
Berikut beberapa aturan untuk membuat fungsi/kelas:
- Hindari membuat banyak parameter dalam sebuah fungsi jika tidak diperlukan. Karena jika argumen terlalu banyak maka akan sulit untuk diuji atau digunakan. Jika diperlukan lebih dari tiga argumen fungsi maka dapat dikonsolidasikan/didiskusikan dengan tim Anda. Daripada membuat banyak parameter fungsi, manfaatkan objek sebagai parameter.
- Jadikan sebuah fungsi hanya melakukan satu hal, karena jika fungsi yang kita buat melakukan banyak hal, maka fungsi tersebut akan sulit untuk dikompilasi dan diuji. Fungsi yang melakukan banyak hal juga tidak memiliki tujuan yang jelas. Saat membuat fungsi yang melakukan lebih dari satu hal, cobalah memecahnya. Hingga setiap fungsi benar-benar melakukan satu hal. Tentu saja, ini juga membuat kode dalam fungsi menjadi lebih bersih dan mudah dibaca.
- Nama fungsi harus mewakili tujuannya. kita juga perlu memperhatikan penamaan fungsinya. Pastikan nama yang diberikan mewakili maksud atau tugas fungsi tersebut. Hal ini juga dapat membantu pengembang/Programmer lain dengan mudah mengetahui tujuan dari fungsi yang Anda buat.
- Buat fungsi untuk menghindari duplikasi kode. Jika Anda merasa sering menulis kode yang berulang-ulang. Anda harus memperhatikan kodenya. Karena kode berulang adalah kandidat kuat untuk membuat sebuah fungsi. Tujuannya tak lain agar kode tersebut bisa digunakan kembali, hanya dengan memanggil fungsinya saja.
Running Program
Untuk menjalankan kode program kita perlu mencari tahu terlebih dahulu apakah bahasa pemrograman yang kita pelajari tersebut dijalankan menggunakan metode compiler atau interpreter.
- Compiler: Compiler menerjemahkan kode dari bahasa pemrograman tingkat tinggi ke dalam kode mesin sebelum program dijalankan. Compiler akan membaca keseluruhan file dan akan menjalankan keseluruhannya serta mengeluarkan hasilnya (Berjalan dengan baik atau menghasilkan error) meskipun terdapat code yang error didalam code programnya. Contoh Bahasa Pemrograman yang menggunakan compiler ialah C/C++, dan Java.
- Interpreter: Interpreter menerjemahkan kode yang ditulis dalam bahasa pemrograman tingkat tinggi ke dalam kode mesin baris demi baris saat kode dijalankan. Interpreter akan membaca baris perbaris lalu jika terjadi error program akan langsung berhenti tepat di baris yang mengalami error tersebut. Contoh bahasa pemrograman yang menggunakan interpreter ialah Python.
Type of Error
Belum lengkap kalo tidak membahas error dalam algoritma pemrograman. Error merupakan sebuah kesalahan yang terjadi dalam penulisan kode program. Umumnya error terdapat banyak macam jenisnya tergantung setiap masing-masing bahasa pemrograman. Berikut ini beberapa tipe error yang berkemungkinan akan terjadi kedepannya ketika mempelajari bahasa pemrograman:
- Logical error atau kesalahan logika merupakan error yang paling sulit untuk dideteksi. Hal itu disebabkan error yang satu ini terjadi bukan karena adanya kesalahan penulisan atau kesalahan pada proses runtime. Namun, juga karena adanya kesalahan dari programmer dalam menuliskan algoritma pada program. Saat logikanya salah, pasti output yang dihasilkan juga akan ikut salah. Kemudian untuk mendeteksinya cukup sulit dan memakan waktu. Sebagian besar dari logical error terjadi karena adanya kesalahan dalam perhitungan atau menggunakan variabel yang salah. Saat terjadi logical error biasanya tidak akan membuat program berhenti secara total. Pasalnya, program akan tetap bisa berjalan normal, tapi tidak bisa berfungsi seperti yang diharapkan.
- Selain logical error, salah satu jenis error pada programming yang paling sering terjadi adalah syntax errors atau kesalahan tata bahasa. Jenis error yang satu ini disebut paling banyak terjadi dalam programming. Meski begitu, mendeteksinya ternyata cukup mudah dan tidak serumit seperti logical error. Syntax error bisa terjadi saat ada kesalahan ejaan pada salah satu kata kunci atau saat ada kesalahan dengan struktur kodenya. Ketika terjadi syntax error maka kode tidak akan berjalan dengan normal karena komputer tidak dapat memahaminya. Untuk memperbaiki jenis error yang satu ini hanya membutuhkan ketelitian untuk mencari adanya kesalahan penulisannya.
- Runtime error adalah kesalahan yang terjadi saat sedang menjalankan suatu program. Ada beberapa penyebab terjadinya jenis error yang satu ini. Misalnya, kesalahan dalam proses input, kesalahan perhitungan, dan proses output. Saat terjadi runtime error, potensi terjadinya crash pada program menjadi cukup besar. Jika ingin memperbaiki jenis error yang satu ini, programmer mau tidak mau harus kembali lagi ke fase pengembangan/development untuk mencari kesalahannya.
- Compilation error terjadi saat proses di mana program yang ditulis dalam bahasa tingkat tinggi dikonversi ke bentuk yang dapat dibaca oleh mesin. Dalam proses tersebut dapat muncul beberapa jenis error seperti syntax error. Bahkan, terkadang meskipun kode syntax sudah benar, tapi compilation error masih bisa tetap terjadi. Hal itu dikarenakan adanya masalah di compiler itu sendiri. Namun, jangan khawatir karena jenis error ini bisa diperbaiki pada fase development.
- Interfacing error kemungkinan besar dapat terjadi karena adanya ketidaksesuaian program software dengan interface perangkat keras yang digunakan. Sementara itu, pada kasus aplikasi web biasanya terjadi karena penggunaan protokol web yang salah.
- Arithmetic error adalah salah satu jenis error pada programming yang tergolong logical error. Namun, kesalahan ini melibatkan perhitungan matematika, bukan pada penulisan bahasa pemrograman. Hal ini umumnya terjadi karena komputer tidak bisa mengerjakan perhitungan yang dimasukkan oleh si programmer. Sebagai contoh, ketika kamu meminta komputer untuk melakukan pembagian dengan angka 0 (nol). Karena tidak bisa dilakukan secara matematis, hal tersebut dapat menyebabkan error yang mencegah program untuk berjalan semestinya. Untuk mengatasinya, kamu bisa melakukan hal-hal seperti:
- Memahami operasi matematika dasar.
- Menghindari kesalahan dalam menggunakan tanda kurung atau urutan operasi.
- Menggunakan angka negatif dalam melakukan perhitungan.
- Menggunakan metode error handling seperti try, catch, except, dsb
- Resource error adalah jenis error pada programming ketika nilai variabel yang kamu masukkan terlalu besar sehingga membuatnya melebihi batas maksimal pemrograman. Sebuah program akan menggunakan sejumlah sumber daya yang disediakan komputer untuk membuatnya bisa berjalan. Ketika program membutuhkan sumber daya lebih banyak dari yang bisa disediakan komputer, hal ini akan menyebabkan resource error. Untuk mengatasinya, kamu bisa menggunakan aplikasi load-testing untuk mengetahui apa yang akan terjadi ketika kamu menjalankan program yang sama secara bersamaan.
- Semantic error adalah jenis error pada programming yang serupa dengan logical error. Meski begitu, perbedaannya adalah logical error menghasilkan data yang salah. Sementara, semantic error menghasilkan suatu hal yang tidak memiliki makna sama sekali.
Terjadinya kesalahan atau error di atas sebenarnya bisa dihindari jika kamu lebih teliti dan melakukan perencanaan yang baik saat di tahap menulis code program.
Aplikasi Web
Aplikasi web merupakan halaman dinamis yang mengizinkan interaksi dengan user melalui jaringan internet. Pertukaran informasi user maupun pengaksesan dokumen HTML oleh dan antar user dilakukan dengan menggunakan aturan HTTP (Hyper Text Transfer Protocol).
Web Client (Browser)
Web client atau web browser merupakan perangkat lunak yang dijalankan pada computer pemakai (user) yang menampilkan dokumen atau informasi web yang diambil dari web server. Contoh web client : IE, Firefox, dan Opera.
Web Server
Merupakan suatu perangkat lunak yang dijalankan pada computer server dan berfungsi agar dokumen web yang disimpan di web server dapat diakses oleh user internet, seperti Apache, dan IIS.
Web Service
Merupakan suatu system yang menyediakan pelayanan yang dibutuhkan oleh user. User atau klien dari web service tidak hanya berupa aplikasi web, tapi juga bisa sebuah aplikasi enterprise. Jadi, web service dengan web server tidaklah sama. Bahkan, sebuah aplikasi web pada web server dapat menjadi klien dari web service. Pelayanan web service bisa berupa XML, yang berisi data yang dibutuhkan klien. Web service tidak menampilkan halaman web, tapi hanya memberikan pelayanan permintaan klien yang memiliki izin akses terhadap pelayanan yang diminta.
Web Hosting
Web hosting adalah sebuah layanan terhadap website suatu organisasi atau perorangan untuk dapat diakses melalui World Wide Web. Sebuah file website yang telah hosting dapat diakses dengan menggunakan domain yang telah didaftarkan dan nama sebuah domain tidak boleh sama persis sepertinya halnya alamat rumah. Jika pada domain misalnya example.com, maka akan berbeda dengan example.net.
HTML (Hyper Text Markup Language)
HTML adalah suatu format data yang digunakan untuk membuat dokumen hypertext atau teks pada computer yang memungkinkan user saling mengirimkan informasi (request-response). Dokumen HTML disimpan dalam ekstensi .htm atau .html. HTML memiliki tag-tag yang telah didefinisikan untuk membuat halaman web. Penulisan tag-tag HTML tidak case-sensitive. Cara penulisan tag sebagai berikut :
HTML digunakan untuk berbagi informasi yang dapat dibaca dan diakses melalui web browser. HTML dikembangkan dari tahun 1993 hinnga kini mencapai ke versi HTML5. Bisa dikatakan HTML merupakan struktur dari situs web.
HTML terdiri dari berbagai elemen dan tag dasar pembangun diantaranya ialah tag html yang didalamnya terdapat tag head dan tag body.
HTML digunakan untuk menyusun struktur tampilan situs web. Biasanya HTML akan digunakan bersamaan dengan CSS dan JavaScript, tetapi sebenarnya tanpa CSS dan JavaScript pun, html dapat berdiri sendiri tetapi dengan tampilan yang bisa terbilang sangat sederhana.
1 | <nama_tag nama_atribut = “argument/nilai”> teks </nama_tag> |
Beberapa tag yang umumnya terdapat dalam sebuah dokumen HTML dapat dilihat pada tabel berikut ini:
Tag
1 | <html> ………. </html> |
Tag diatas merupakan tag dasar yang menandakan dokumen merupakan dokumen HTML.
1 | <head> ………..</head> |
Tag untuk mengisikan informasi tentang dokumen web. Di dalamnya juga terdapat tag meta untuk memberikan keterangan pada halaman web, tag ini bersifat opsional. Contoh Tag Meta:
1 | <meta name=”pembuat” content=”me”> |
1 | <title> ……….. </title> |
Tag diatas merupakan tag yang berada di dalam tag head untuk menuliskan judul web pada caption web
1 | <body> ……….. </body> |
Tag diatas digunakan untuk mengisikan isi dokumen web yang ingin ditampilkan sebagai halaman web. Di dalam tag body terdapat berbagai atribut seperti : alink, background, bgcolor, bgproperties, link, text, topmargin, vlink.
1 | <h1> ………..</h1> |
Tag diatas digunakan untuk menuliskan sebuah judul dengan berbagai ukuran, dimulai dari yang paling besar adalah h1 hingga yang paling h6.
1 | <table> …. </table> |
Tag untuk mendefinisikan sebuah tabel. Didalamnya terdapat tag th untuk mendefiniskan sel header tabel, caption untuk memberi judul tabel, tr untuk mendefinisikan baris tabel, td untuk mendefinisikan kolom.
1 | <a> ……… </a> |
Tag anchor, untuk menuliskan link jika di dalamnya ditambahkan atribut href. Contoh:
1 | <a href=www.google.com> Google </a> |
berikut ini adalah struktur dasar dari elemen dan tag dasar dari html:
1 | <html> |
Tag head digunakan untuk mengatur panel tab pada browser, mengatur icon situs serta judul situs, selain itu tag head juga digunakan untuk menambahkan tags meta data, dan menambahkan package (library external) tambahan lain seperti menambahkan script serta api external yang digunakan untuk membuat tampilan situs lebih responsif. Sedangkan untuk tag body digunakan untuk mengatur seluruh tampilan isi website.
Dengan menyusun struktur situs web dengan html, itu akan mempermudah pengembang dalam melakukan pembuatan sebuah situs web.
untuk dapat mengetahui berbagai tag lainnya pada html anda dapat membuka situs berikut ini dan ini
CSS
CSS (Cascading Style Sheet) merupakan tempat dimana user dapat mengontrol dan mengatur style-style dokumen HTML yang ada. CSS dapat dikatakan sebagai template HTML dan merupakan feature yang penting dalam pembuatan Dynamic HTML. CSS bisa dibuat langsung pada dokumen HTML, ataupun dipisah dalam dokumen lain / eksternal file (*.css) yang kemudian dipanggil ke dokumen HTML. Bentuk penulisan CSS dapat terdiri dari :1
2
3
4
5
6Objek {properti1:value ; properti2:value ; ...}
Objek.class {properti1:value ; properti2:value ; ...}
Objek : Selector {properti1 : value ; properti2 : value ; ....}
Objek.class : Selector {properti1:value ; properti2:value ; ...}
.class {properti1:value ; properti2:value ; ...}
#IDObjek {properti1:value ; properti2:value ; ....}
CSS Digunakan untuk menghidupkan elemen html agar tampilan terlihat lebih menarik.
Jika HTML adalah struktur dan kerangka pembangun situs web, maka CSS dapat dikatakan sebagai cat dan furniturnya untuk memperindah situs webnya.
Berikut ini Materi Lengkap CSS
Version Control System (VCS)
Merupakan aplikasi untuk mengelola dan memanajemen riwayat versi aplikasi dalam proyek pembuatan dan pengembangan perangkat lunak. Dengan VCS kita dapat mengecek setiap pengembangan dan riwayat versi aplikasi yang sedang dikembangkan.
Berikut ini adalah beberapa aplikasi yang digunakan untuk menjadi seorang web developer:
Github
Github merupakan tools VCS paling banyak digunakan setelah Git. Github memiliki komunitas yang luas dan hampir semua teknisi IT terkenal seperti Linus Torvalds menggunakan Github untuk mengelola dan menyimpan code proyek program buatan mereka disana.
Anda wajib menggunakan Github sebagai Web Developer agar kedepannya anda dapat lebih mengenal tentang komunitas IT open source serta mencoba untuk melakukan uji coba tampilan pada github.
Gitlab
Gitlab merupakan tools VCS paling populer selain Github dan Git. Gitlab banyak digunakan oleh beberapa perusahaan startup dan juga karena keandalannya yang hampir menyamai github membuat tools VCS ini menjadi terpopuler digunakan setelah Github.
Subversion (SVN)
SVN merupakan tools yang biasanya digunakan untuk proyek skala enterprise oleh beberapa perusahaan besar untuk mengontrol versi aplikasi.