Cara Membuat Proyek HTML5 Dasar di Ubuntu Menggunakan Netbeans

Dalam seri pengembangan web seluler 4 artikel ini, kami akan memandu Anda dalam menyiapkan Netbeans sebagai IDE (juga dikenal sebagai Lingkungan Pengembangan Terintegrasi ) di Ubuntu untuk mulai mengembangkan aplikasi web HTML5 yang ramah seluler dan responsif.

Berikut adalah seri 4 artikel tentang Pengembangan Web Seluler HTML5 :

Bagian 1 :Cara Membuat Proyek HTML5 Dasar di Ubuntu Menggunakan Netbeans Bagian 2 :Menambahkan Komponen jQuery dan Bootstrap untuk Membuat Aplikasi HTML5 Responsif dan Mobile-FriendlyBagian 3 :Membuat Aplikasi HTML5 Dinamis dan Di-Deploy di Server LAMP Menggunakan FilezillaPart 4 :Menyetel Aplikasi Web HTML5 Dinamis Menggunakan Utilitas Sumber Terbuka

Lingkungan kerja yang dipoles dengan baik (seperti yang akan kita lihat nanti), pelengkapan otomatis untuk bahasa yang didukung, dan integrasi tanpa batas dengan browser web, menurut pendapat kami, adalah beberapa fitur yang paling membedakan Netbeans.

Mari kita ingat juga bahwa HTML 5 spesifikasi membawa banyak keuntungan bagi pengembang – untuk menyebutkan beberapa contoh:kode yang lebih bersih berkat banyak elemen baru), kemampuan pemutaran video dan audio bawaan (yang menggantikan kebutuhan akan Flash), kompatibilitas silang dengan browser utama, dan pengoptimalan untuk seluler perangkat.

Meskipun awalnya kami akan menguji aplikasi kami di mesin pengembangan lokal kami, pada akhirnya kami akan memindahkan situs web kami ke server LAMP dan mengubahnya menjadi alat dinamis.

Sepanjang jalan, kami akan menggunakan jQuery (library Javascript lintas platform terkenal yang sangat menyederhanakan skrip sisi klien), dan Bootstrap (Kerangka HTML, CSS, dan JavaScript populer untuk mengembangkan situs web responsif). Anda akan melihat artikel yang masuk betapa mudahnya menyiapkan aplikasi mobile-friendly menggunakan alat HTML 5 ini.

Setelah mengikuti rangkaian singkat ini, Anda akan dapat:

1. gunakan alat yang dijelaskan di sini untuk membuat aplikasi dinamis HTML5 dasar, dan
2. lanjutkan untuk mempelajari keterampilan pengembangan web tingkat lanjut.

Namun, harap dicatat bahwa meskipun kami akan menggunakan Ubuntu untuk seri ini, instruksi dan prosedurnya juga berlaku untuk distribusi desktop lainnya (Linux Mint , Debian , CentOS , Fedora , sebut saja).

Untuk itu, kami telah memilih untuk menginstal perangkat lunak yang diperlukan (Netbeans dan JDK Java , seperti yang akan Anda lihat sebentar lagi) menggunakan tarball umum (.tar.gz ) sebagai metode penginstalan.

Karena itu – mari kita mulai dengan Bagian 1 .

Menginstal Java JDK di Ubuntu

Tutorial ini mengasumsikan bahwa Anda sudah memiliki instalasi desktop Ubuntu. Jika tidak, silakan merujuk ke artikel Instalasi Desktop Ubuntu, yang ditulis oleh rekan kami Matei Cezar sebelum melanjutkan lebih jauh.

Sejak Netbeans versi yang tersedia untuk diunduh dari repositori resmi Ubuntu agak ketinggalan jaman, kami akan mengunduh paket dari situs web Oracle untuk mendapatkan versi yang lebih baru.

Untuk melakukan ini, Anda memiliki dua pilihan:

• Pilihan 1 :Unduh bundel yang menyertakan Netbeans + JDK, atau
• Pilihan 2 :Instal kedua utilitas secara terpisah.

Dalam artikel ini kita akan memilih #2 karena itu tidak hanya berarti unduhan yang sedikit lebih kecil (karena kami hanya akan menginstal Netbeans dengan dukungan untuk HTML5 dan PHP) tetapi juga akan memungkinkan kami untuk memiliki penginstal JDK mandiri jika kami memerlukannya untuk set lain yang tidak memerlukan Netbeans atau melibatkan pengembangan web (kebanyakan terkait dengan produk Oracle lainnya).

Untuk mengunduh JDK , buka situs Oracle Technology Network dan navigasikan ke Java → Java SE → Unduhan bagian.

Saat Anda mengeklik gambar yang disorot di bawah, Anda akan diminta untuk menerima perjanjian lisensi dan kemudian Anda akan dapat mengunduh JDK yang diperlukan versi (yang dalam kasus kami adalah tarball untuk 64-bit mesin). Saat diminta oleh browser web Anda, pilih untuk menyimpan file daripada membukanya.

Saat unduhan selesai, buka ~/Unduhan dan ekstrak tarball ke /usr/local/bin :

$ sudo tar xf jdk-17_linux-x64_bin.tar.gz -C /usr/local/bin

Menginstal Netbeans di Ubuntu

Untuk menginstal Netbeans dengan dukungan untuk HTML5 dan PHP , buka https://netbeans.org/downloads/ dan klik Unduh atau gunakan perintah wget berikut untuk mengunduh seperti yang ditunjukkan.

$ cd ~/Downloads
$ wget https://dlcdn.apache.org/netbeans/netbeans/12.5/Apache-NetBeans-12.5-bin-linux-x64.sh
$ chmod 755 Apache-NetBeans-12.5-bin-linux-x64.sh
$ sudo ./Apache-NetBeans-12.5-bin-linux-x64.sh --javahome /usr/local/bin/jdk-17.0.1

Sejak saat itu, ikuti petunjuk di layar untuk menyelesaikan penginstalan dengan meninggalkan nilai default:

dan tunggu hingga penginstalan selesai.

Membuat Proyek HTML5 Dasar di Ubuntu

Untuk membuka Netbeans , pilih dari Menu tanda hubung :

Untuk membuat proyek HTML5 baru menggunakan template dasar yang disediakan oleh Netbeans, buka File → Proyek baru → HTML5 → Aplikasi HTML5 . Pilih nama deskriptif untuk proyek Anda dan terakhir klik Selesai (jangan sertakan templat situs eksternal atau pustaka javascript saat ini):

Selanjutnya kita akan dibawa ke UI Netbeans , tempat kami dapat menambahkan folder dan file ke Akar Situs . kami sesuai kebutuhan. Dalam kasus kami, ini berarti menambahkan folder untuk font, gambar, file Javascript (skrip), dan lembar gaya berjenjang (gaya) untuk membantu kami mengatur konten kami dengan lebih baik di artikel mendatang.

Untuk menambahkan folder atau file, klik kanan Akar Situs lalu pilih Baru → Map atau HTML berkas.

Sekarang mari kita perkenalkan beberapa HTML5 baru elemen dan memodifikasi badan halaman:

1. dan
2. mewakili konten utama dokumen, tempat topik atau fungsi utama ditampilkan.

3. digunakan untuk materi mandiri, seperti gambar atau kode, untuk menyebutkan beberapa contoh.

.
Sekarang salin cuplikan kode berikut ke index.html . Anda file di Netbeans.

KIAT :Jangan hanya menyalin dan menempel dari jendela ini ke lingkungan pengembangan Anda, tetapi luangkan waktu untuk mengetik di setiap tag untuk memvisualisasikan fitur pelengkapan otomatis Netbeans, yang akan berguna nanti.

!DOCTYPE html>
<html>
	<head>
    	<title>TODO supply a title</title>
    	<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	</head>
	<body>
    	<header background-color: #6699CC">THIS IS A HEADER</header>
    	<main>
        	<article>
            	<p>This is some sample text.</p>
            	<p>Another line of sample text for this HTML 5 article</p>
                	<aside>
                    	<figure>
                        	<img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" alt="HTML 5 logo" />
                        	<figcaption>Figure 1: The HTML 5 logo</figcaption>
                    	</figure>
                        	<h2>Web development basics series at Tecmint.com</h2>
                        	<h3><a href="http://dev.w3.org/html5/html-author/">This is HTML 5!</a></h3>
                        	<p>Some text here</p>
                	</aside>
        	</article>
    	</main>
    	<footer background-color: #CC6699">THIS IS A FOOTER</footer>
	</body>
</html>

Anda dapat melihat halaman dengan memilih browser web (sebaiknya Firefox , seperti pada gambar di bawah) dan mengeklik tombol Mainkan ikon:

Anda sekarang dapat melihat kemajuan perkembangan Anda sejauh ini:

Ringkasan

Dalam artikel ini, kami telah meninjau beberapa keuntungan menulis aplikasi web Anda menggunakan HTML 5 dan menyiapkan lingkungan pengembangan dengan Netbeans di Ubuntu .

Kami mengetahui bahwa spesifikasi bahasa ini memperkenalkan elemen baru dan dengan demikian memberi kami kemungkinan untuk menulis kode yang lebih bersih dan mengganti komponen yang membutuhkan sumber daya seperti film Flash dengan kontrol bawaan.

Dalam artikel mendatang, kami akan memperkenalkan jQuery dan Bootstrap sehingga Anda tidak hanya dapat menggunakan kontrol ini dan melihat halaman Anda dimuat lebih cepat, tetapi juga menjadikannya mobile-friendly.

Sementara itu, silakan bereksperimen dengan kontrol lain di Netbeans , dan beri tahu kami jika Anda memiliki pertanyaan atau komentar menggunakan formulir di bawah ini.