Bahagian pertama artikel menerangkan cara halaman web sebelah pelanggan berfungsi.
Sekarang mari kita lihat apa yang berlaku pada bahagian pelayan.

Bahagian II

Bahagian pelayan: borang dan pangkalan data

1. Borang

Setakat ini kami hanya bercakap tentang memulihkan data dari pelayan. Bagaimana dengan menghantar data? Borang adalah sisi lain HTML: ia membenarkan kami menghantar maklumat ke pelayan. Kami mungkin menggunakan borang untuk mengemas kini maklumat sedia ada atau menambah maklumat baharu.
Kaedah yang paling biasa digunakan dalam bentuk HTML ialah GET et SELEPAS.

Cuba lihat kod di atas :
Kami mempunyai dua medan input (input) di mana pengguna boleh memasukkan data dan butang hantar (mengemukakan).
Selepas pengguna mengklik butang ini, penyemak imbas menghantar nilai data yang dimasukkan dalam dua medan ke skrip PHP yang dipanggil createproduct.php.
Dalam contoh kami, ia adalah PHP, tetapi ia boleh menjadi JSP, Python, atau mana-mana bahasa skrip sebelah pelayan yang lain. Skrip bahagian pelayan boleh membaca nilai yang dihantar oleh penyemak imbas melalui kaedah tersebut SELEPAS, kemudian memprosesnya atau menyimpannya dalam fail atau pangkalan data. Secara ringkasnya, begitulah cara data dihantar ke pelayan sebelum disimpan.

Apakah PHP?

PHP untuk Pengawas Hiperteks, ialah bahasa skrip sebelah pelayan untuk mencipta tapak web dan aplikasi dinamik. Dalam erti kata lain: ia adalah bahasa yang memungkinkan untuk mengakses dan membaca pangkalan data kemudian untuk menyalin maklumatnya dalam halaman HTML.
Nota: Katakan kami ingin menambah pengesahan sebelum menghantar data — contohnya, nama produk mesti mengandungi sekurang-kurangnya 5 aksara atau medan “SKU” tidak boleh kosong. Kami mungkin menggunakan JavaScript untuk pengesahan ini. Kami kemudiannya perlu bertindak balas terhadap peristiwa klik butang serah, dan menyemak sama ada elemen web mempunyai data yang kami mahukan. Jika ada yang hilang, kami boleh memaparkan mesej ralat dan berhenti menghantar data ke pelayan.

2. Pangkalan data

Sebaik sahaja jumlah maklumat mula berkembang, mendapatkannya daripada fail boleh menjadi sangat rumit dan juga sangat perlahan. Sebagai contoh, mari kita ambil fail senarai harga, katakan syarikat itu mempunyai beribu-ribu produk dan kami ingin mengetahui maklumat produk terakhir dalam senarai — yang bermaksud kami perlu membaca semua produk sehingga apa yang kami temui produk kami. mencari. Ini bukan cara yang optimum untuk mendapatkan maklumat. Ia adalah untuk menyelesaikan masalah ini bahawa pangkalan data dicipta.
Dalam pangkalan data (DB), kami menyimpan data dalam jadual (set data berstruktur). Oleh itu, kami boleh melakukan carian, mengisih data atau melakukan sebarang operasi lain dengan mudah.

3. Bahasa & rangka kerja skrip sebelah pelayan

Kami memerlukan bahasa skrip sebelah pelayan untuk :

menyimpan dan membaca maklumat daripada pangkalan data atau fail;
memperoleh (GET) maklumat daripada pelayan dengan melakukan operasi tertentu;
membaca maklumat yang dihantar oleh klien (SELEPAS) dan menyimpan atau mengedarkannya dengan menjalankan operasi pemprosesan tertentu.

Bahasa pengaturcaraan biasa seperti C dan Java boleh membaca dan menulis ke pangkalan data, tetapi ia tidak boleh dijalankan terus pada pelayar web (klien). Ini menimbulkan bahasa skrip sebelah pelayan.
Bahasa skrip sebelah pelayan boleh melakukan semua pemprosesan data biasa, berkomunikasi dengan pangkalan data, dan berjalan pada pelayan web. Bahasa skrip sebelah pelayan yang paling biasa ialah PHP, Perl, JSP, Ruby on Rails, dll.
Pembangun mula menggunakan bahasa ini dan mereka tidak lama lagi menyedari bahawa mereka menulis kod boilerplate yang sama untuk semua projek, yang membawa kepada pembangunan rangka kerja yang memudahkan dan mempercepatkan pembangunan aplikasi web.
Beberapa rangka kerja yang diketahui :

PHP: Zend, YII, Symfony, CakePHP, Laravel;
CMS PHP (juga digunakan sebagai rangka kerja): Drupal, Joomla, SugarCRM, WordPress;
Java : J2EE, Hibernate, Struts, Spring;
JavaScript : Node.js.

4. Seni bina & sesi MVC

Seni bina MVC membantu kami membahagikan kod kepada beberapa fail dan membolehkan kami memisahkan logik perniagaan daripada pembentangan, untuk memudahkan pengubahsuaian mereka kemudian.
Mengambil contoh platform blog, kami akan kembali kepada semua topik yang dijelaskan sebelum ini untuk melihat bagaimana kami boleh membuat kod menggunakan seni bina MVC.
Platform blog menguruskan kandungan dinamik dan boleh mengandungi beberapa modul seperti :

pengguna (pengguna);
Item (catatan blog);
Kata kunci / tag (tags);
Kategori (kategori).

Sebelum bercakap tentang ciri-ciri lain, mari kita bayangkan reka bentuk pangkalan data untuk jadual Artikel (tbl_blog_post). Medan penting adalah :

Seperti yang anda lihat, kami menyimpan maklumat pengguna pendua: nama pertama (Nama Awalan) dan nama keluarga (Nama Terakhir) ulangi kandungan medan Dibuat Oleh. Jika kami mempunyai 10 catatan blog, kami akan menyimpan maklumat pengguna pendua ini dalam setiap 000 siaran. Dan mungkin terdapat maklumat lain tentang pengguna untuk disimpan, seperti peranan mereka, tarikh log masuk terakhir mereka, dsb.
Alternatifnya, seperti yang anda mungkin telah meneka, adalah untuk menyimpan maklumat pengguna ini dalam jadual lain Pengguna (tbl_user) dan pautkannya dengan artikel (tbl_blog_post) dengan id seperti di bawah :

Pemisahan data kepada berbilang jadual ini adalah salah satu daripada banyak prinsip normalisasi data.
Bahagian penting seterusnya ialah membenarkan pengguna memasukkan data ke dalam jadual ini melalui borang HTML. Ingat bahawa kami memperincikan langkah-langkah ini untuk memahami konsep — ini sama sekali bukan tutorial pengaturcaraan yang lengkap.

Penciptaan catatan blog baharu oleh pengguna yang disahkan

Untuk ini kita memerlukan borang HTML dengan dua medan input (Tajuk, Kandungan) menggunakan mana pengguna boleh membuat artikel.
Sebaik sahaja pengguna memasukkan maklumat dan mengklik butang hantar, "Buat Artikel", nilai borang dihantar ke pelayan web melalui kaedah SELEPAS. Nilai yang dihantar SELEPAS boleh dibaca oleh mana-mana bahasa skrip sebelah pelayan. Skrip pelayan (PHP, Ruby on Rails, Python, dll.) membaca nilai daripada borang dan menghantarnya ke pangkalan data.
Skrip juga boleh memproses maklumat, yang boleh untuk mendapatkan tarikh dan masa dari pelayan atau melakukan pengiraan tertentu berdasarkan nilai yang diekstrak dari jadual lain dalam pangkalan data atau dari perkhidmatan lain. web.
Satu lagi perkara yang perlu diperhatikan: skrip juga boleh melakukan pengesahan, juga dipanggil pengesahan sisi pelayan, untuk memastikan data itu sah. Hanya jika data itu sah, ia disimpan dalam jadual tbl_blog_post. Jika tidak, mesej ralat dihantar kepada klien untuk memasukkan maklumat yang hilang.
Secara visual, borang untuk mendapatkan semula data daripada jadual kami tbl_blog_post mungkin kelihatan seperti antara muka penciptaan pos WordPress :

Terdapat medan untuk memasukkan tajuk (Tajuk), kemudian kotak input untuk kandungan (Kandungan).
Tarikh penciptaan (Dicipta pada), untuk bahagiannya, diambil secara dinamik oleh bahasa skrip (di sini, PHP) dan akan sepadan dengan detik tepat penciptaan artikel (tahun, bulan, hari, jam, minit dan juga saat).
Data lain yang tidak perlu dimasukkan: pengecam artikel (ID). Ia dijana secara automatik oleh pangkalan data yang memastikan ia unik dalam jadual yang sama.
Dalam meja kami tbl_blog_post, sebagai tambahan kepada tajuk dan kandungan, kami juga mempunyai medan yang dipanggil dicipta oleh.
Bagaimanakah kita mendapatkan nilai untuk mengisi medan ini?

Pengguna yang disambungkan / disahkan

Secara amnya, kebanyakan aplikasi web mempunyai fungsi log masuk. Setiap kali pengguna berjaya mengesahkan, maklumat pengguna itu disimpan dalam sesi supaya maklumat boleh digunakan semula kemudian.

Apakah Sesi?

HTTP ialah protokol tanpa kewarganegaraan, yang bermaksud tiada permintaan GET ou SELEPAS dihantar oleh pelanggan ke pelayan web tidak dijejaki. Jika pelanggan (penyemak imbas) membuat dua permintaan, pelayan web tidak tahu sama ada ia datang daripada pengguna yang sama. Ini juga bermakna, sebagai contoh, jika anda disambungkan ke tapak e-dagang dan anda menambah produk pada bakul anda, pelayan tidak tahu bahawa ia adalah untuk pengguna yang sama.
Untuk mengatasi ketiadaan kewarganegaraan ini, pelanggan perlu menghantar maklumat tambahan dalam setiap permintaan mereka untuk mengekalkan maklumat sesi untuk tempoh berbilang permintaan. Maklumat tambahan ini disimpan pada bahagian klien dalam kuki, dan pada bahagian pelayan dalam sesi.
Sesi ialah tatasusunan pembolehubah, di mana maklumat disimpan untuk digunakan pada beberapa halaman. Sesi dikenal pasti oleh ID unik yang namanya bergantung pada bahasa — dalam PHP ia dipanggil “ID Sesi PHP”. ID sesi yang sama ini mesti disimpan dalam kuki pada penyemak imbas untuk dikaitkan dengan pengguna.

Tunjukkan satu item

Langkah seterusnya ialah memaparkan catatan blog secara individu. Kita perlu membaca data dari pangkalan data berdasarkan id pos (ID) artikel yang diminta, kemudian paparkan nilai medan Tajuk (Tajuk) dan Kandungan (Kandungan).
Berikut ialah pseudokod untuk memaparkan satu siaran :

Baca data pangkalan data yang dikaitkan dengan ID item.
Masukkan data ini ke dalam halaman HTML yang mengandungi CSS dan JS.

Semua kod di atas boleh ditulis dalam satu fail. Ini sebenarnya bagaimana ia dilakukan pada mulanya, tetapi komuniti pembangunan menyedari bahawa ia tidak optimum. Sesungguhnya, untuk setiap ciri baharu yang akan ditambah, keseluruhan kod itu perlu diubah suai, dan bukan mudah untuk berfungsi dalam persekitaran berbilang pembangun.
Ini telah menyebabkan pembangun web menggunakan seni bina MVC, yang pada asasnya memecahkan kod kepada tiga komponen :

Le Modele : Ini adalah logik perniagaan, bebas daripada antara muka pengguna. Dalam contoh kami, ini ialah kod yang mengambil semula artikel daripada pangkalan data.
Lihat : Pandangan perwakilan visual data. Dalam contoh kami, kod HTML yang memaparkan artikel. Jadi data datang daripada Model, dan HTML ialah View.
Pengawal : Ia dipanggil pada klik pada pautan "Lihat artikel". Pengawal mendapatkan semula data daripada pangkalan data menggunakan Model dan memaparkannya dalam Paparan.

Mari lihat URL biasa untuk aplikasi menggunakan seni bina MVC.
http://www.abc.com/blogpost/id/1
di sini blogpost ialah nama pengawal dan pandangan adalah tindakan (kaedah) pengawal ini. id ialah pengecam item. Jika kami memasukkan URL ini dalam penyemak imbas, permintaan akan pergi ke tindakan "Lihat" pengawal "BlogPost", dan memanggil model di sana untuk mendapatkan kandungan artikel dengan ID "1", dalam bentuk 'an objek. Objek ini kemudiannya dihantar ke "Paparan" untuk dipaparkan.
Lebih konkrit: URL berikut https://www.ux-republic.com/blog/page/2 memaparkan halaman kedua senarai semua catatan blog UX-Republic.
Memecahkan URL, kami ada :

blog, pengawal
halaman, pengecam yang menetapkan nombor halaman
2, nombor halaman

Setiap kali paging diklik, ia adalah kaedah pengawal yang sama blog yang dilaksanakan dan yang bertanggungjawab untuk mendapatkan semula kandungan yang sepadan dengan halaman selectionnée.

Ajax & Apl Halaman Tunggal (SPA)

Jika anda dilahirkan pada alaf yang lalu, anda mesti ingat penyedia mel web Hotmail dan Yahoo!, yang sangat popular pada tahun 1990-an dan 2000. Apabila anda mengklik pada peti masuk atau pada e-mel, seluruh halaman telah dikemas kini. Sekitar tahun 2004, Gmail tiba dengan ciri penting: Ajax. Dengan Ajax, seluruh halaman tidak dimuat semula — hanya bahagian yang memerlukannya sahaja. Jadi, jika anda menerima e-mel baharu, anda hanya melihat e-mel itu muncul di bahagian atas halaman, tanpa perlu memuatkannya semula. Ini membantu memberikan pengguna pengalaman menyemak imbas yang lebih baik, dan Ajax menjadi cara yang sangat popular untuk membina apl.

Apa itu Ajax?

istilah Ajax mewakili sekumpulan besar teknologi web yang boleh dilaksanakan dalam aplikasi yang berkomunikasi dengan pelayan di latar belakang, tanpa mengganggu keadaan semasa halaman.
Dengan Ajax, anda menghantar permintaan melalui GET kepada pelayan, dan pelayan menghantar responsnya tanpa menyekat halaman web, yang bermaksud bahawa pengguna boleh meneruskan menyemak imbas tanpa sebarang gangguan. Respons daripada pelayan dimasukkan atau dilampirkan pada halaman web semasa.
Di tapak yang tidak menggunakan Ajax, setiap tindakan pengguna memerlukan muat semula lengkap halaman daripada pelayan. Proses ini tidak cekap dan mencipta pengalaman pengguna yang buruk kerana semua kandungan pada halaman hilang sebelum muncul semula.
Ajax adalah salah satu teknik yang digunakan untuk membina aplikasi satu halaman (Aplikasi Halaman Tunggal ou SPA). Seperti namanya, keseluruhan apl muat pada satu halaman dan semua kandungannya dimuatkan secara dinamik. Rangka kerja JavaScript seperti Angular, React dan Backbone.js boleh digunakan untuk melakukannya SPA.

Pelayan & pelayar web

Pelayar ialah jurubahasa web. Mereka meminta data daripada pelayan web, yang memproses permintaan dan menghantar respons kepada penyemak imbas dalam HTML (dengan CSS, JS, imej, dll.), dan respons ini kemudiannya dipaparkan.
Permintaan kepada pelayan web boleh dibuat menggunakan salah satu daripada tiga kaedah penting :

GET : dapatkan sumber yang diminta sebagai respons;
KETUA : sama seperti GET, tetapi sumber itu diperoleh semula dalam pengepala respons;
SELEPAS : menghantar data ke pelayan.

Sebagai contoh, apabila anda menaip "google.com" dalam penyemak imbas, yang terakhir menghantar arahan ini di latar belakang ke pelayan google.com:
DAPATKAN: http://google.com
Pelayan web Google kemudiannya akan melihat fail utamanya (indeks) dan mengembalikan responsnya kepada klien. Ia biasanya menghantar kandungan HTML dan fail CSS bersama-sama dengan mana-mana fail media lain.

# Terjemahan artikel Fahami Pembangunan Web Dalam Kurang 1 JamOleh Shaik Ismail

Fahami pembangunan web dalam masa kurang dari sejam [bahagian 2]