Machine Test: Dynamic Slider with Login-Protected Upload Form

📦 Archived. WPGenius used this practical test for hiring in 2020. It is kept here for reference and no longer accepts submissions. You can still use it to practise PHP and MySQL.

This is a small website project for candidates who cleared the first interview round. You build a simple site where users can sign up, log in, upload images, and see those images in a slider on the home page.

It checks the basics of everyday web development: page layout, forms, sessions, a database, and file uploads.

---

What you will build

Page	What it does
Home (index)	Header with logo and menu, plus a full-width image slider
Login / Sign up	Create an account and log in
Home (logged in)	Same page, but the menu changes and greets the user
My Account	Upload an image with a title and see your uploads in a table

Skills checked

HTML · CSS · JavaScript · Bootstrap · PHP · MySQL

What you need

Tool	Suggested
Local server	WampServer, or XAMPP on any OS
Code editor	Notepad++, Sublime Text or VS Code
Browser	Chrome or Firefox
Slider library	Swiper (CDN files)
CSS framework	Bootstrap 4

Getting started

1. Install and start WampServer (or XAMPP).
2. Create a project folder inside the server's web folder, for example www/machine-test.
3. Open phpMyAdmin and create a new database for the project.
4. Open http://localhost/machine-test/ in your browser and start building.

---

Step 1: Home page (logged out)

1. Build a header with a logo and a menu.
2. The menu has two links: Home and Login.
3. Show the Login link only to visitors who are not logged in.
4. Add a full-width slider below the header.

Step 2: Login and Sign up

1. Make a Sign up form with a name and a password.
2. Validation rules:
   • Both fields are required.
   • The password must be at least 8 characters.
   • The name must be unique. Show an error if the username already exists.
3. Save sign-up details in the database.
4. Make a Login form that checks the name and password against the database.

Step 3: Home page (logged in)

1. After a successful login, send the user to the home page.
2. Change the header for logged-in users:
   • Hide the Login link.
   • Show a My Account link.
   • Show the username with a Logout option.

Step 4: My Account page

1. Add an upload form with two fields: Name (the image title) and Image.
2. Save the image file on the server and its details in the database.
3. Show the uploaded items in a table below or beside the form.

Step 5: Dynamic slider

1. The home page slider must show the images uploaded from My Account.
2. A new upload should appear in the slider right away, without any code changes.
3. Show the title from the upload form on top of each slide.

---

Bonus points

• Use Git from the start: run git init and commit as you go.
• Write clean, well-structured code that follows a consistent coding style.
• Make sure your HTML and CSS are valid.

Extra challenges

Finished early? Try these:

#	Area	Challenge
1	PHP + MySQL	Add categories for uploaded images.
2	PHP + MySQL	Show a different slider for each user, using only their own images.
3	CSS + PHP	Highlight the active menu item on the current page.
4	CSS	Make the header responsive, with a mobile menu.
5	Security	Don't store plain-text passwords.

Note on challenge 5: the original 2020 brief asked for MD5. MD5 is no longer considered safe for passwords. Today, use PHP's built-in password_hash() and password_verify().

---

Demo recordings

Short screen recordings of a finished solution. Some of them also show extras that go beyond the brief, such as a contact form and an admin page.

Recording	Shows
Login flow	Signing up, logging in and landing on the home page
Header	The logged-in header with the user menu and logout
Slider	The home page slider moving through uploaded images
Contact form	An extra contact form with name, address, city, image and message
Admin page	An extra admin view listing submissions, with delete and update

---

Maintained by WPGenius Solutions LLP, Kolhapur, India.