Cara menggunakan exec php nodejs

Question

Dalam tutorial ini, kita akan mengembangkan sistem login dengan Node. js, Express, dan MySQL. Node. js akan memungkinkan kita untuk mengembangkan aplikasi kita dengan JavaScript, Express adalah kerangka web, dan kita akan menggunakan MySQL untuk menyimpan dan mengambil detail akun (nama pengguna, kata sandi, dll. )

Table of Contents Show

1. Mengapa membuat sistem login dengan Node. js sebagai lawan dari PHP?
2. 1. Apa yang Akan Anda Pelajari dalam Tutorial ini
2. 2. Persyaratan
2. 3. Pengaturan & Struktur File
Struktur File
3. Menata Formulir Login dengan CSS
4. Membuat Template Login dengan HTML
5. Membuat Aplikasi Login dengan Node. js
Masuk penuh. Sumber js
Tentang Penulis

Sistem login yang akan kita kembangkan serupa dengan tutorial sistem login PHP, tetapi tidak akan komprehensif

Ini mencakup fitur tambahan dan tautan unduhan ke kode sumber. Untuk informasi lebih rinci dan tangkapan layar, klik di sini

Isi

Node. js adalah lingkungan server sumber terbuka yang kuat yang memanfaatkan JavaScript sebagai bahasa skrip intinya

Semakin banyak orang yang menyadari Node. js, ini menjadi semakin populer dalam pengembangan aplikasi web. Oleh karena itu, jika Anda berencana untuk mengembangkan aplikasi untuk web masa depan, saya sangat menyarankan Anda untuk meningkatkan pengetahuan Anda dengan Node. js

Node. Pengelola paket js (NPM) sudah memiliki lebih dari 450.000 paket yang tersedia untuk Anda unduh. Angka-angka itu saja menunjukkan seberapa cepat pertumbuhannya

Apakah anda tahu Tidak seperti PHP, Node. js tidak bergantung pada Apache atau Nginx karena Node. js adalah lingkungannya sendiri

Jika Anda terbiasa dengan JavaScript, Anda akan senang mengembangkan aplikasi dengan Node. js, dan akan dapat beradaptasi dengan sangat mudah

2. Mulai

Sebelum kita mulai mengembangkan Node. sistem login js, kita perlu menginstal perangkat lunak dan paket yang akan diandalkan oleh aplikasi kita, dan selanjutnya membuat struktur untuk aplikasi kita

2. 1. Apa yang Akan Anda Pelajari dalam Tutorial ini

Membuat koneksi ke database MySQL dan memilih baris menggunakan kueri MySQL
Menerapkan permintaan GET dan POST dengan Node. js dan Ekspres
Merancang formulir login dengan CSS3
Menerapkan validasi yang akan memastikan data yang diambil valid
Memanfaatkan sesi, yang akan menentukan apakah pengguna masuk atau tidak

2. 2. Persyaratan

Server MySQL >= 5. 6
Node. js
Ekspres - Instal dengan perintah. npm instal ekspres --save
Sesi Ekspres - Instal dengan perintah. npm instal sesi-ekspres --save
MySQL untuk Node. js - Instal dengan perintah. npm instal mysql --save

2. 3. Pengaturan & Struktur File

Ikuti petunjuk di bawah ini

Buat direktori baru bernama nodelogin, yang dapat dibuat di mana saja di lingkungan Anda
Buka baris perintah sebagai administrator, dan arahkan ke direktori baru Anda dengan perintah berikut. CDC. \nodeprojects\nodelogin
Jalankan perintah. npm init - ini akan meminta kita untuk memasukkan nama paket, enter. Gabung
Saat diminta untuk masuk ke titik masuk, masukkan login. js
Kita perlu menginstal paket yang tercantum dalam persyaratan, jadi kita harus menjalankan perintah yang tercantum di atas

Direktori baru akan muncul bernama node_modules, yang diisi dengan semua modul yang telah kita instal. Jangan hapus direktori ini, karena akan merusak aplikasi kita

Struktur File

\-- nodelogin
    . -- Gabung. html
    . -- Gabung. js
\-- statis
        . -- gaya. css

Cascading style sheet akan memungkinkan kita untuk menyusun formulir login dan membuatnya terlihat lebih menarik. File stylesheet terdiri dari properti yang terkait dengan elemen HTML

Mengedit gaya. file css dan tambahkan

CSS

* {
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
    font-size: 16px;
}
body {
    background-color: #435165;
}
.login {
    width: 400px;
    background-color: #ffffff;
    box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
    margin: 100px auto;
}
.login h1 {
    text-align: center;
    color: #5b6574;
    font-size: 24px;
    padding: 20px 0 20px 0;
    border-bottom: 1px solid #dee0e4;
}
.login form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 20px;
}
.login form label {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    background-color: #3274d6;
    color: #ffffff;
}
.login form input[type="password"], .login form input[type="text"] {
    width: 310px;
    height: 50px;
    border: 1px solid #dee0e4;
    margin-bottom: 20px;
    padding: 0 15px;
}
.login form input[type="submit"] {
    width: 100%;
    padding: 15px;
   margin-top: 20px;
    background-color: #3274d6;
    border: 0;
    cursor: pointer;
    font-weight: bold;
    color: #ffffff;
    transition: background-color 0.2s;
}
.login form input[type="submit"]:hover {
  background-color: #2868c7;
    transition: background-color 0.2s;
}

Hanya itu yang perlu kita tambahkan ke file CSS kita

Formulir login akan terdiri dari elemen formulir HTML dan elemen input, memungkinkan pengguna untuk memasukkan detailnya dan mengirimkannya. Tidak perlu menyertakan Node. kode js dalam file template

Edit info masuk. html dan tambahkan

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,minimum-scale=1">
		<title>Login</title>
        <!-- the form awesome library is used to add icons to our form -->
		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
        <!-- include the stylesheet file -->
        <link href="/style.css" rel="stylesheet" type="text/css">
	</head>
	<body>
		<div class="login">
			<h1>Login</h1>
			<form action="/auth" method="post">
				<label for="username">
					<!-- font awesome icon -->
					<i class="fas fa-user"></i>
				</label>
				<input type="text" name="username" placeholder="Username" id="username" required>
				<label for="password">
					<i class="fas fa-lock"></i>
				</label>
				<input type="password" name="password" placeholder="Password" id="password" required>
				<input type="submit" value="Login">
			</form>
		</div>
	</body>
</html>

_

Mari persempit apa yang akan dilakukan setiap elemen

Form — kita perlu menggunakan elemen form untuk mengirimkan data ke Node.js kita. aplikasi js. Atribut action akan mengarah ke rute autentikasi kita (permintaan POST), yang akan kita buat nanti
- Input (nama pengguna) — akan menangkap nama pengguna pengguna. Selain itu, atribut wajib dideklarasikan untuk memastikan bidang wajib diisi
- Input (kata sandi) — akan menangkap kata sandi pengguna
- Input (kirim) — tombol yang akan digunakan untuk mengirimkan formulir

Template login akan memungkinkan pengguna untuk mengirimkan detail mereka, dan kami akan menggunakan Node. js untuk memvalidasi detailnya. Kami akan menggunakan permintaan POST untuk menangkap detailnya, yang kemudian dapat kami tangani di Node.js kami. rute autentikasi js

Sekarang setelah semua dasar kita selesai, kita akhirnya dapat mulai mengembangkan aplikasi kita dengan Node. js

Untuk menggunakan modul di Node. js app, kita perlu memasukkannya. Oleh karena itu, kita perlu menambahkan variabel berikut ke login kita. file js

JS

const mysql = require('mysql');
const express = require('express');
const session = require('express-session');
const path = require('path');

Kode di atas akan menyertakan modul MySQL, Express, Express-session, dan Path, dan mengaitkannya dengan variabel yang telah kita deklarasikan

Sebelum kita menerapkan kode koneksi database, kita memerlukan database untuk terhubung. Oleh karena itu, kita harus menjalankan pernyataan SQL di bawah ini baik dengan baris perintah atau Editor MySQL pilihan Anda. Pastikan server MySQL berjalan pada port 3306

SQL

CREATE DATABASE IF NOT EXISTS `nodelogin` DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;
USE `nodelogin`;

CREATE TABLE IF NOT EXISTS `accounts` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(50) NOT NULL,
  `password` varchar(255) NOT NULL,
  `email` varchar(100) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;

INSERT INTO `accounts` (`id`, `username`, `password`, `email`) VALUES (1, 'test', 'test', '[email protected]');

Pernyataan SQL di atas akan membuat database (nodelogin) dan membuat tabel akun. Selain itu, ini akan memasukkan akun pengujian yang dapat kita gunakan untuk tujuan pengujian

Kami sekarang dapat terhubung ke database kami dengan kode berikut

JS

const connection = mysql.createConnection({
	host     : 'localhost',
	user     : 'root',
	password : '',
	database : 'nodelogin'
});

_

Detail koneksi harus mencerminkan kredensial database Anda. Di sebagian besar lingkungan lokal, nama pengguna default adalah root, jadi Anda mungkin tidak perlu mengubah apa pun, tetapi dalam mode produksi, kami sangat menyarankan Anda mengubah nama pengguna default untuk MySQL dan menyetel kata sandi yang kuat

Express adalah apa yang akan kita gunakan untuk aplikasi web kita, yang menyertakan paket yang penting untuk pengembangan web sisi server, seperti sesi dan penanganan permintaan HTTP

Tambahkan kode berikut untuk menginisialisasi express

JS

const app = express();

Setelah itu, kita perlu mengaitkan modul yang akan kita gunakan dengan Express

JS

app.use(session({
	secret: 'secret',
	resave: true,
	saveUninitialized: true
}));
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(express.static(path.join(__dirname, 'static')));

_

Pastikan untuk memperbarui variabel kode rahasia saat mendeklarasikan fungsi sesi karena akan digunakan untuk mengamankan data sesi. Kami akan menggunakan sesi untuk menentukan apakah pengguna masuk atau tidak. Metode json dan urlencoded akan mengekstrak data formulir dari login kita. html

Tip Keamanan Saat menerapkan proyek Anda ke server produksi, pastikan Anda memanfaatkan SSL karena ini akan membantu mengamankan cookie browser yang terkait dengan sesi

Setelah itu, kita perlu mendeklarasikan login route yang akan menampilkan login kita. html ke klien menggunakan permintaan GET

Tambahkan berikut ini

JS

// http://localhost:3000/
app.get('/', function(request, response) {
	// Render login template
	response.sendFile(path.join(__dirname + '/login.html'));
});

Ketika klien membuat koneksi baru ke Node kami. js server, itu akan menampilkan login. html

Selanjutnya, kita perlu menambahkan rute baru yang akan mengautentikasi pengguna

Tambahkan berikut ini

JS

// http://localhost:3000/auth
app.post('/auth', function(request, response) {
	// Capture the input fields
	let username = request.body.username;
	let password = request.body.password;
	// Ensure the input fields exists and are not empty
	if (username && password) {
		// Execute SQL query that'll select the account from the database based on the specified username and password
		connection.query('SELECT * FROM accounts WHERE username = ? AND password = ?', [username, password], function(error, results, fields) {
			// If there is an issue with the query, output the error
			if (error) throw error;
			// If the account exists
			if (results.length > 0) {
				// Authenticate the user
				request.session.loggedin = true;
				request.session.username = username;
				// Redirect to home page
				response.redirect('/home');
			} else {
				response.send('Incorrect Username and/or Password!');
			}			
			response.end();
		});
	} else {
		response.send('Please enter Username and Password!');
		response.end();
	}
});

_

Kode di atas akan membuat rute autentikasi kita menggunakan metode POST, yang akan menangkap kolom input kita saat pengguna mengirimkan formulir

Ingat tindakan yang kami nyatakan untuk formulir kami di template login?

Saat pengguna mengirimkan formulir, kode akan memeriksa apakah kedua kolom masukan tidak kosong dan selanjutnya akan memilih akun dari tabel akun kami di database MySQL kami. Pengguna berhasil diautentikasi dan dialihkan ke halaman beranda jika akun tersebut ada. Jika tidak, mereka akan menemukan pesan kesalahan

Variabel sesi masuk akan digunakan untuk menentukan apakah pengguna masuk atau tidak, dan variabel nama pengguna dapat kita gunakan untuk menampilkan di halaman beranda

Kami akhirnya dapat membuat rute rumah yang akan menampilkan nama pengguna pengguna

Tambahkan berikut ini

JS

// http://localhost:3000/home
app.get('/home', function(request, response) {
	// If the user is loggedin
	if (request.session.loggedin) {
		// Output username
		response.send('Welcome back, ' + request.session.username + '!');
	} else {
		// Not logged in
		response.send('Please login to view this page!');
	}
	response.end();
});

_

Akhirnya, Node kami. Server js perlu mendengarkan port, jadi untuk tujuan pengujian, kita dapat menggunakan port 3000

Tambahkan berikut ini

JS

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,minimum-scale=1">
		<title>Login</title>
        <!-- the form awesome library is used to add icons to our form -->
		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
        <!-- include the stylesheet file -->
        <link href="/style.css" rel="stylesheet" type="text/css">
	</head>
	<body>
		<div class="login">
			<h1>Login</h1>
			<form action="/auth" method="post">
				<label for="username">
					<!-- font awesome icon -->
					<i class="fas fa-user"></i>
				</label>
				<input type="text" name="username" placeholder="Username" id="username" required>
				<label for="password">
					<i class="fas fa-lock"></i>
				</label>
				<input type="password" name="password" placeholder="Password" id="password" required>
				<input type="submit" value="Login">
			</form>
		</div>
	</body>
</html>

_0

Idealnya, saat Anda menggunakan sistem login Anda ke server produksi, Anda ingin server Anda mendengarkan pada port 80, jadi Anda tidak perlu menentukan nomor port di URL

Untuk memulai Node. js app, kita dapat menjalankan perintah node login. js di baris perintah. Jika kita arahkan ke http. // localhost. 3000/ di browser kita, kita akan melihat form login, yang akan terlihat seperti berikut

http. // localhost. 3000/

Anda dapat melanjutkan untuk masuk dengan akun percobaan (nama pengguna. tes, kata sandi. tes). Jika berhasil, Anda akan melihat nama pengguna ditampilkan di layar

Masuk penuh. Sumber js

JS

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,minimum-scale=1">
		<title>Login</title>
        <!-- the form awesome library is used to add icons to our form -->
		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
        <!-- include the stylesheet file -->
        <link href="/style.css" rel="stylesheet" type="text/css">
	</head>
	<body>
		<div class="login">
			<h1>Login</h1>
			<form action="/auth" method="post">
				<label for="username">
					<!-- font awesome icon -->
					<i class="fas fa-user"></i>
				</label>
				<input type="text" name="username" placeholder="Username" id="username" required>
				<label for="password">
					<i class="fas fa-lock"></i>
				</label>
				<input type="password" name="password" placeholder="Password" id="password" required>
				<input type="submit" value="Login">
			</form>
		</div>
	</body>
</html>

_1

Kesimpulan

Anda sekarang harus memiliki pemahaman dasar tentang cara kerja sistem login dan dasar-dasar yang terlibat. Meskipun kami tidak menyarankan penerapan sistem ke lingkungan produksi, namun Anda dapat menggunakannya sebagai basis dalam proyek pengembangan Anda

Apa selanjutnya? . ) dan aspek registrasi

Jika Anda menikmati tutorial ini, jangan lupa untuk menyukai, mengikuti, dan membagikannya di media sosial. Kami menghargai dukungan Anda

Nikmati pengkodean

Jika Anda ingin mendukung kami, pertimbangkan untuk membeli paket di bawah karena ini akan sangat membantu kami membuat lebih banyak tutorial berkualitas dan menjaga agar server kami tetap aktif dan berjalan

Dasar

Canggih

Kode sumber

File SQL basis data

Sistem Masuk & Registrasi

Halaman rumah

Halaman profil

Aktifkan fitur akun

Edit halaman profil

Ingat saya fitur

Lupa & Setel Ulang Kata Sandi

integrasi AJAX

Enkripsi kata sandi

perlindungan reCAPTCHA

perlindungan CSRF

Perlindungan kekerasan

Otentikasi dua faktor

panel admin
— Lihat Dasbor
— Membuat, mengedit, dan menghapus akun
— Cari, urutkan, dan filter akun
— Kelola Template Email
— Edit Pengaturan

Desain Responsif (ramah seluler)

file SCSS

Kode yang dikomentari

Pembaruan & dukungan gratis (bug dan masalah kecil)

Panduan pengguna

* Pembayaran diproses dengan PayPal
* Kedua paket menyertakan kode sumber tutorial
* Paket lanjutan juga termasuk paket dasar

$20. 00

PayPal

Unduh

Garis-garis

Cryptocurrency

Unduh

Untuk informasi lebih detail mengenai paket lanjutan, klik di sini

Tentang Penulis

David Adams

Pengembang situs web yang antusias, saya telah merancang dan mengembangkan aplikasi web selama lebih dari 10 tahun, saya menikmati kreativitas yang saya masukkan ke dalam proyek saya dan menikmati apa yang dibawa orang lain ke web yang luar biasa. Tujuan saya adalah membantu pendatang baru mempelajari cara-cara web

kode php