Dalam tutorial ini, kita akan membuat sistem login dan registrasi lengkap dengan Python Flask dan MySQL . NS
Paket Basic dan Advanced menyertakan fitur tambahan dan tautan unduhan ke kode sumber. Ada beberapa langkah yang perlu kita ambil sebelum kita membuat sistem login dan registrasi python, kita perlu mengunduh dan mengatur Python dan paket yang akan kita gunakan. Kami perlu membuat direktori dan file proyek kami, Anda dapat meletakkan direktori di mana saja di komputer Anda, selama Python dapat mengaksesnya, buat direktori dan file di bawah ini. Setiap file akan berisi yang berikut: Instruksi di bawah ini akan memulai server web Anda [Windows]: Mode debug akan memungkinkan kita untuk mengedit file kita tanpa terus-menerus me-restart server web. MySQL
Workbench adalah GUI untuk membuat dan mengedit database kami, ikuti petunjuk di bawah ini.
1. Persyaratan
Struktur & Pengaturan File
Struktur File
-- pythonlogin |-- main.py -- static |-- style.css -- templates |-- index.html |-- register.html |-- home.html |-- profile.html |-- layout.html
td ameritrade api python
2. Membuat Database dan Tabel Pengaturan
CREATE DATABASE IF NOT EXISTS `pythonlogin` DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci; USE `pythonlogin`; 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', ''];
Pernyataan SQL di atas akan membuat database kami pythonlogin dengan meja akun , itu juga akan memasukkan akun pengujian, akun ini akan kita gunakan untuk tujuan pengujian nanti di tutorial, itu akan memastikan semuanya berfungsi sebagaimana mestinya.
3. Membuat Stylesheet [CSS3]
Sunting style.css file dan tambahkan yang berikut ini:
* { 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; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { background-color: #435165; margin: 0; } .login, .register { width: 400px; background-color: #ffffff; box-shadow: 0 0 9px 0 rgba[0, 0, 0, 0.3]; margin: 100px auto; } .login h2, .register h2 { text-align: center; color: #5b6574; font-size: 24px; padding: 20px 0 20px 0; border-bottom: 1px solid #dee0e4; } .login .links, .register .links { display: flex; padding: 0 15px; } .login .links a, .register .links a { color: #adb2ba; text-decoration: none; display: inline-flex; padding: 0 10px 10px 10px; font-weight: bold; } .login .links a:hover, .register .links a:hover { color: #9da3ac; } .login .links a.active, .register .links a.active { border-bottom: 3px solid #3274d6; color: #3274d6; } .login form, .register form { display: flex; flex-wrap: wrap; justify-content: center; padding-top: 20px; } .login form label, .register 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'], .login form input[type='email'], .register form input[type='password'], .register form input[type='text'], .register form input[type='email'] { width: 310px; height: 50px; border: 1px solid #dee0e4; margin-bottom: 20px; padding: 0 15px; } .login form input[type='submit'], .register 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, .register form input[type='submit']:hover { background-color: #2868c7; transition: background-color 0.2s; } .navtop { background-color: #2f3947; height: 60px; width: 100%; border: 0; } .navtop div { display: flex; margin: 0 auto; width: 1000px; height: 100%; } .navtop div h2, .navtop div a { display: inline-flex; align-items: center; } .navtop div h2 { flex: 1; font-size: 24px; padding: 0; margin: 0; color: #eaebed; font-weight: normal; } .navtop div a { padding: 0 20px; text-decoration: none; color: #c1c4c8; font-weight: bold; } .navtop div a i { padding: 2px 8px 0 0; } .navtop div a:hover { color: #eaebed; } body.loggedin { background-color: #f3f4f7; } .content { width: 1000px; margin: 0 auto; } .content h2 { margin: 0; padding: 25px 0; font-size: 22px; border-bottom: 1px solid #e0e0e3; color: #4a536e; } .content > p, .content > div { box-shadow: 0 0 5px 0 rgba[0, 0, 0, 0.1]; margin: 25px 0; padding: 25px; background-color: #fff; } .content > p table td, .content > div table td { padding: 5px; } .content > p table td:first-child, .content > div table td:first-child { font-weight: bold; color: #4a536e; padding-right: 15px; } .content > div p { padding: 5px; margin: 0 0 10px 0; } Jangan ragu untuk menyesuaikan stylesheet, mengubah warna teks, ukuran font, lebar konten, dll. Stylesheet ini akan digunakan untuk semua halaman kami [login, registrasi, beranda, dan halaman profil].
4. Membuat Sistem Login
Akhirnya kita bisa mulai coding dengan Python! Apa yang akan kita lakukan di bagian ini adalah membuat template login, menghubungkan ke database MySQL, otentikasi login, dan membuat variabel sesi.
pengaturan server ftp raspberry pi
Hal pertama yang perlu kita lakukan adalah mengimpor paket yang akan kita gunakan, edit main.py file dan tambahkan yang berikut ini:
from flask import Flask, render_template, request, redirect, url_for, session from flask_mysqldb import MySQL import MySQLdb.cursors import re Sekarang kita perlu membuat beberapa variabel dan mengkonfigurasi detail koneksi MySQL.
Tambahkan setelah kode di atas:
app = Flask[__name__] # Change this to your secret key [can be anything, it's for extra protection] app.secret_key = 'your secret key' # Enter your database connection details below app.config['MYSQL_HOST'] = 'localhost' app.config['MYSQL_USER'] = 'root' app.config['MYSQL_PASSWORD'] = '' app.config['MYSQL_DB'] = 'pythonlogin' # Intialize MySQL mysql = MySQL[app] Pastikan Anda mengubah detail MySQL menjadi detail Anda sendiri dan mengubah kunci rahasia.
Sekarang kita dapat membuat halaman login, untuk melakukan itu kita perlu membuat rute baru.
Tambahkan setelah kode di atas:
# //localhost:5000/pythonlogin/ - this will be the login page, we need to use both GET and POST requests @app.route['/pythonlogin/', methods=['GET', 'POST']] def login[]: return render_template['index.html', msg=''] Membuat Template Masuk
Sunting index.html file dan tambahkan:
Login Home Profile Logout {% block content %}{% endblock %} Sekarang kita dapat dengan mudah menggunakan tata letak yang sama untuk halaman beranda dan profil.
Saat ini, ketika pengguna masuk akan ada pesan keluaran dasar, sekarang kita dapat mengubahnya untuk mengarahkan ulang ke halaman beranda baru, temukan kode berikut dalam fungsi rute masuk:
return 'Logged in successfully!' Ubah dengan:
return redirect[url_for['home']] Pengguna sekarang akan diarahkan ke halaman beranda ketika mereka masuk, masukkan detail pengujian ke dalam formulir masuk dan klik tombol Gabung tombol, Anda akan melihat yang berikut:
//localhost:5000/pythonlogin/home
Ini hanyalah beranda sederhana tempat Anda dapat bekerja, selanjutnya kita akan membuat halaman profil dan menampilkan detail pengguna.
7. Membuat Halaman Profil
Halaman profil adalah tempat pengguna dapat melihat detail mereka [nama pengguna, kata sandi, dan email].
Tambahkan rute berikut ke main.py mengajukan:
cara membuat rts
# //localhost:5000/pythinlogin/profile - this will be the profile page, only accessible for loggedin users @app.route['/pythonlogin/profile'] def profile[]: # Check if user is loggedin if 'loggedin' in session: # We need all the account info for the user so we can display it on the profile page cursor = mysql.connection.cursor[MySQLdb.cursors.DictCursor] cursor.execute['SELECT * FROM accounts WHERE id = %s', [session['id']]] account = cursor.fetchone[] # Show the profile page with account info return render_template['profile.html', account=account] # User is not loggedin redirect to login page return redirect[url_for['login']] Ini akan membuat rute profil dan memilih semua detail akun dari database jika pengguna masuk.
Sunting profile.html file dan tambahkan:
{% extends 'layout.html' %} {% block title %}Profile{% endblock %} {% block content %} Profile Page
Your account details are below:
Username: {{ account['username'] }} Password: {{ account['password'] }} Email: {{ account['email'] }}
{% endblock %} Ini akan memperluas tata letak [ layout.html ] file yang telah kita buat sebelumnya, jika masuk ke halaman profile maka akan terlihat seperti berikut :
//localhost:5000/pythonlogin/profile
Itu pada dasarnya untuk halaman rumah dan profil, the Paket lanjutan termasuk fitur edit profil, ini akan memungkinkan pengguna untuk mengubah nama pengguna, kata sandi, dan email mereka.
Selamat! Anda telah membuat sistem login dan registrasi Anda sendiri dengan Python Flask dan MySQL. Anda bebas menggunakan kode sumber di aplikasi Anda.
Belajarlah lagi
#python #mysql