How to create a simple social media site
In this tutorial, we are going to learn how to create a simple but functional social media site by using a content management system called WordPress. This is a step-by-step guide to creating the site on your local host using the MAMP server and MYSQL database. The site will have functionalities like creating accounts, adding friends, posting content (text, image, audio), messaging with friends, and many more. Since we are building this site for learning testing (accessing the backend and database of a program is a key to effective testing) we may not need much customization.
Installing MAMP
Downloading MAMP
To download MAMP go to www.mamp.info. MAMP has two versions, one pro and another free. To download the free version click on the Free Download button.
Then choose to download on Mac or Windows. After that download begins.
Installing MAMP
When the download completes, Go to the folder and double-click on the installer file to run the installer. Follow the following steps:
- Installer screen: Click next then uncheck the install pro box and click next.
- Important Information Screen: Click Continue. Don’t rename the folder.
- Software License Agreement Screen: Select the language you wish to use with MAMP. Click Agree in the small dropdown, then click Continue.
- Destination Select: MAMP must be installed in the Applications folder to work properly. Click Continue for the next step.
- Installation Type Click Install to perform a standard installation of MAMP for all users of your computer. Click Install to continue. Enter your admin username and password. then click Install Software.
- Installation – Installing MAMP Screen: The installation process may take several minutes.
Starting MAMP
After installation, the MAMP welcome page opens. This page contains links to your PHP configuration (phpinfo), phpMyAdmin, as well as the standard MAMP configurations.
The MAMP control panel also opens, which shows that your local MAMP server is working. You should see green indicators next to Apache Server and MySQL Server:
You can start or stop your local server from the control panel by clicking Start Server or Stop Server.
Configuring MAMP
During installation, MAMP sets the default ports for both Apache (port 8888) and MySQL (port 8889).
Creating a Database
open the Welcome page in your browser, then click the phpMyAdmin link at the top of the screen.
To create a database, click Databases in the top navbar.
On the screen that appears, you need to enter the database name, choose your database connection collation from the dropdown box, and then click Create.
your new database will appear in the list on the left.
As an alternative option, you can use MYSQL workbench instead of PhpMyAdmin to connect to the database. You have to download and install it on your computer first.
Downloading WordPress
You next need to download WordPress onto your computer. Go to the Download page of WordPress.org and click the Get WordPress > Download WordPress button.
Once WordPress has been downloaded to your Windows PC, you need to unzip the folder and extract the files.
Move WordPress into MAMP htdocs
Now, you need to move WordPress into the htdocs folder of your MAMP install. Copy the unzipped WordPress folder and navigate to MAMP > htdocs (Go to files>local disk c > MAMP folder >htdocs)Paste the WordPress folder into the htdocs folder.
The name of this WordPress folder will be included in the URL of your local WordPress install (i.e. localhost/WordPress). You can rename the folder (and consequently the URL) to anything that works for you.
Alternatively, you can find htdocs from MAMP. Under preference go to the web server, there you can find the Document root, which is where your html/PHP files and images are stored. The default document root in MAMP is: “/Applications/MAMP/htdocs”.
Installing WordPress
The last step is to install WordPress on your local server. Type the URL of your local WordPress site into your browser’s address bar. if you haven’t renamed your WordPress folder, type in ‘localhost/WordPress’ or it is localhost:8888 or 127.0.0.1:8888. Then follow the following steps:
First, select the language of your choice.
You will then need to fill in some information about the new database you have created. You will need to define…
- Database Name – This is the name you chose when setting up the new database for your test site in phpMyAdmin.
- Database Username and Password – Both the username and password are root. This info can be found on the MAMP installation page in the MySQL section
- Database Host – This is local host. Again, this info can be found on the MAMP installation page. WordPress expects port 3306 by default but MAMP assigns port 8889 for the database so we may need to specify the port to 8889 in WordPress in case it fails to connect.
- Table Prefix – Leave this as the default wp_.
Now click the Run the Installation button to install WordPress.
You will need to provide some details about your test site. These settings can be changed later. Then click on Install WordPress.
You can now log into your WordPress test site using the localhost/Name/wp-admin URL.
Installing themes and plugins
Downloading BuddyX theme
You next need to download the Buddyx Theme. Go to https://bloggdude.com/buddyx and click on themes > Free download button then fill in all the required fields and click on free purchase > click on account > go to downloads and click on buddyx theme. download starts.
Installing/uploading buddyX theme
once you download the files go to the WP dashboard and click on Appearance > Themes>Add new > Upload theme > Choose file > Choose the downloaded file > Click on Install now > click Activate.
Another way to install buddyx theme: go to Appearance>themes>add new> search buddyx > click install> then click activate. This is the easier method in case you cannot find the theme follow the above step.
Plugins Installing
Once you activate the theme you will see install related plugins message. To install the plugins click on Begin installing plugins > select all > apply install> then click activate.
Here are a list of plugins you need to install:
- BuddyPress
- Classic widgets
- Elementor
- Pie Register
- Hide Admin Bar From Front End
- Kirki Customizer Framework
- Login Logout Menu
- rtmedia for wordpress,buddypress and bbpress
BuddyPress
To install Buddypress: go to plugin > click add new > search for BuddyPress > click install now > then click install.
Then go to settings> buddyPress> check everything and save.
Now you can go back to your site and see a lot already changed. It will add pages with their own features.
Adding the pages to menu
First, create a menu and save it.
To add the pages go to appearance > menu > select the pages (groups, member, logout|loging, and )add to menu > select display location and save.
login|logout is found under the login logout menu.
For the home page add a custom link, in the place of the URL put your site URL. example:http://localhost/wordpress/
Then go to settings> Reading > change home page display to static page choose activity and save
visit the site you will see every menu displayed.
Now go ahead and create some user accounts and post content to make it look like the site on Demosocial.
rt Media
To enable posting images and files install rt media and activate it.
Hide Admin Bar From Front End
Go to plugins> click on add new > search for Hide Admin Bar From Front End > install> activate.
To hide the admin menu bar go to settings>Hide Admin Bar From Front End > check Hide Admin Bar for All Guests Users and save
Login Logout Menu
Go to plugins> click on add new > search for Hide Admin Bar From Front End > install> activate.
Go to Appearance > menus > login logout menu > check login|logout > click save changes
pie Register
To disable email verification install and activate the Pie register.
Remove the default registration page and add the pie registration page to the menu.
This will enable you to create accounts without email verification. You can go to the pie register setting and enable or disable this feature anytime you want
Customization
Widgets
To add the left and right bars. click on Customize on top of the page > go to widgets > select buddyx right or left sidebar and add your choice widgets.
Summary
Use these sources to refer to:
- MAMP:https://make.wordpress.org/core/handbook/tutorials/installing-a-local-server/mamp/
- WordPress: https://athemes.com/tutorials/install-wordpress-locally-using-mamp.
Learn Python & QA Automation With Self-Paced Video Courses
Python | Selenium WebDriver | API Testing | SQL | Robot Framework | BDD (Cucumber)
Stay connected with news and updates!
Join our mailing list to receive the latest news and updates from our team.
Don't worry, your information will not be shared.
We hate SPAM. We will never sell your information, for any reason.
