
Learn to build a fully functional online quiz with an admin panel using Flutter, PHP, and MySQL, setting up XAMPP, a CMS, and an API for a Flutter project.
Set up the admin panel and local database by downloading resources, extracting them, placing the quiz app folder in htdocs, starting xampp, and importing the database via phpmyadmin.
Set up the admin panel and establish a MySqli connection in PHP using session_start, localhost, root, and Udemy Quiz database, then implement admin login with email and password.
Create a category in a quiz app using php and mysqli by handling form submission, uploading a photo, and inserting name, photo, and status into the category table.
Learn to perform a view operation on category using PHP and MySqli: fetch all category records, display id, name, status, and photo using base url.
Learn to implement an edit operation in the category table using PHP and MySqli, updating cat name, photo, and status through a where clause on cat_id.
Perform a delete operation in PHP to remove a category by id, delete its image from the image directory, and remove the database record.
Define API as an application programming interface, a set of functions that let applications access data and interact with external components like servers.
Learn to build a PHP API using mysqli_connect and mysqli_query, handle result fetching with fetch_array, and encode data with json_encode to send to a MySQL database.
Create a PHP category API using mysqli to fetch active categories, encode as JSON, include image base URL, and prepare data for a Flutter app.
Create a leaderboards API in PHP using MySQL, joining user, badge, and achievement data to return ranked users by score, including badges and avatars for an admin panel.
Test the leaderboards API by adding a user and their badges, then refresh to see silver and platinum badges display for the user.
Create a PHP-based quiz API that joins quiz and category tables, fetches quiz content and images via MySQLi, and outputs structured quiz data for the app.
Create a badge API using PHP and MySQLi to fetch badge data from the badge table, filtering by status and returning id, name, image, description, key, and required.
Create PHP get photo API to retrieve user image from the database by user id, decoding input data and using mysqli fetch for display on a smartphone via Dio.
Create a PHP login function for a Flutter app by reading JSON input via file_get_contents, decoding email and password, querying user table, checking status 1, and returning data on success.
Create a PHP-based user register function that connects to the database, validates and inserts new users with name, email, password, and photo upload from gallery or camera.
Learn how to create a PHP score function that connects to a MySQL database, retrieves the current score, updates it, and inserts new scores for users.
Master PHP and MySQL to power an online quiz with an admin panel, validate user data with if statements, and insert score records.
Test the score and badge function in the online quiz app by calling the scoring function, updating table data, and refreshing the admin panel to verify scores and badges.
Create a function to fetch a photo from the main database and display it in the app, using an io-based approach to retrieve and render the image for the user.
Create a flutter project, configure project name, location, and package name, and learn to add packages as you prepare to store data and photos in your database.
Design a Flutter register screen with scaffold, containers, and a vertical column, style text fields, and add image picking from gallery with assets for database-ready data.
Design a Flutter user registration screen with text fields for name, email, and password, using text editing controllers, blue borders and icons, and focus styling, then navigate to home.
Build a flutter register screen with name, email, and password text fields and a register button. Prepare to send this data to a php mysql backend for storage, including photo.
Create a Flutter registration function that collects name, email, and password, allows selecting a photo from gallery or camera, and stores the data to the database with a loading indicator.
Learn to register a user using HTTP by sending name, email, password, and a profile photo from camera or gallery, handle the response, and navigate to login.
create an alert dialog to flag a user email or name already in the database, featuring a blue title, image, and a dismiss action, and navigation to login on success.
Develop a Flutter image picker that opens a bottom sheet to choose from gallery or camera, wiring the selection to display and process the image.
Explore final user registration with a photo by selecting a gallery image, sending it to the database, and creating a new user profile in the Flutter, PHP, and MySQL app.
Add a circular progress indicator to the user registration flow in Flutter, center the loading state, control visibility, and adjust layout with containers to show progress during sign-up.
Create a fully functional user register flow with a login button and center-aligned styling, adjusting font size and color, and connect it to the login screen.
Design a login page in Flutter with a container layout, margins, padding, and an image. Use text editing controllers for username and password and enable login navigation.
Create a login function using email and password, display a progress indicator, send data via dio, handle the response, store preferences, and redirect to the homepage on success.
Learn how to save and retrieve user data in flutter using shared preferences, including setting name and email, handling asynchronous calls, and using the preferences instance in the login page.
Demonstrate a login flow using post, patch, and remove actions, handle login success to redirect to the home page, and manage back navigation and data display.
Add an auto redirect from the login view to the homepage when data from posts and supporters shows the user is logged in, using state checks and conditional logic.
Build a Flutter bottom navigation view for the home page, featuring home, account, and leaderboard items with active color states, badges, and body content driven by the current index.
Design the home page in Flutter by adding a slider, quiz categories, and items, while fetching data from a PHP and MySql backend using a future builder.
Create a json serializable quiz model using json_serializable and built_value libraries, generate the model from a database map, fetch data, and display it in the app.
Create a json quiz content model with image, content, question, and answer fields; serialize, generate a file, and prepare data for storage in the database.
Learn to fetch data from a database in a Flutter PHP and MySQL app by building a get data function, mapping quiz data into a quiz model, and displaying content.
In Flutter, implement a function to fetch quiz data from the database and render it via a future builder, displaying the slider, category, and quiz items.
Fix bugs on displaying quiz items by validating the category name and IDs in the database, ensuring data appears correctly after actions like sorting and adding items.
Display a new quiz card in Flutter by loading the quiz image from the network and showing the category name in a horizontal layout, using data fetched from the database.
Create and display a quiz slider in Flutter by integrating a swiper library, loading slides with a future builder, and presenting network images with overlaid text in a responsive layout.
Create a category model by defining a category class with name and cat status fields, implementing from-map and to-map serialization, and enabling data fetch from the database.
Build a category controller, fetch all categories from the database, and display them in a FutureBuilder with images and styling, enabling navigation to each quiz.
Create a question from API data by fetching the latest question, handling content and image data, and integrating it into the online quiz with an admin panel.
create the main quiz by modeling the question data, loading content with category names, and wiring navigation from the home screen to display selected quiz content and category details.
Fetch quiz data from the database and render questions, images, and options in a responsive Flutter layout with a container and network-loaded images.
Create true or false answer buttons in a Flutter quiz UI, style them with padding and colors, and wire on-click logic to submit answers and show the question title.
Add the current question to the app bar in a Flutter online quiz, displaying question number, score, and category, with navigation to the next question.
Demonstrate adding and displaying the quiz score in the app bar, tie score updates to correct answers, center the category title, and prepare to send results to the database.
Create the final answer button for a quiz by implementing a check answer function that handles true and false responses, updates the score, and stores final score in the database.
Learn to load a user photo from the database by building a get photo function, fetch by id, and display it in the quiz admin panel.
Display a winner's photo and a dynamic winner message using an image, container, and text styling, with score-based color cues and final score display.
Display the user’s score in a Flutter app with rich text styling, showing 'your score' in green, a maximum score, and a refresh button.
Learn to store the final score in your database by pressing a styled button and triggering a dialog on success. Implement a future progress dialog to confirm data submission.
Demonstrate storing quiz scores to the database by sending score and user id from the app to the backend, inserting into the score table, and testing results.
Fix bugs and update the score by user id in the online quiz app, updating the database table via a query and validating with test users.
Learn to implement a confetti animation in Flutter using the confetti library, configure the controller, gravity, direction, duration, and color, then trigger it with play and a popup redirect.
Learn to implement a dialog-based lock back button in the main quiz using navigator pop, confirm exit, and prevent back navigation until finishing the quiz, with custom dialog styling.
Add a background image from assets, wrap it in a stack inside a container, center it, and adjust margins. Prepare for the leaderboard in the next lecture.
Course prerequisites:
Basic knowledge in programming to get started
Basic knowledge in Flutter
Concepts are explained clearly. You will always learn what you're building and why, and then how to do it.
How this course can be of help:
Gaining more knowledge in Flutter How to Create Badge System, Score and Quiz
Learn how to make flutter app fully functional
Learn how to make simple admin panel(content management system)
What's in the course:
Create complex design UI completed
Crate Login, Register and Logout using PHP and Database MySQL
Image Picker form Camera and Gallery
Create multiple item in home page
App Bar
Shared Preferences
JSON Serializable Generator
Bottom Navigation Bar in Flutter
Form Input in Flutter
Leaderboards System
Badge System
Score System
Create Different Page High Score
Pop Up Dialog
Create API
Create CRUD (Create, Read, Update and Delete using PHP)
Create simple Admin Panel (Content Management System)
FutureBuilder, ListviewBuilder and GridviewBuilder
Loading item when fetch data from Database
Learn PHP, Dart and Flutter Programming Language
Clean-code and avoid Boilerplate code
Requirements:
Windows application development
Mac application development
Xampp or Wampp installed on your computer
Android Studio or Visual Studio Code
Access to a computer with an internet connection.
and you are ready for the journey
What Should I Expect After this Course?:
You will be able to create simple Admin Panel (Content Management System)
You will be able to create simple API to provide App
You will be able to create Online Quiz using Flutter and PHP by accessing data from Database
You will be able to create how to fetch and display data from API
This course made using Windows not Mac, but you can follow step by step this course if you are using Mac, with requirements you have installed Wampp or Xampp on computer