NewJack Website - Flash MP3 Player with PHP/MYSQL

After having created my Flash MP3 player (link), the tracks in it could be edited by editing the XML file that is linked to in the Player's ActionScript code. I thought this was fine as it would save you from having to dive into the FLA file every time you wanted to make a change. Then I had a brain wave in terms of how I could take this one step further. I've got more and more confident with PHP and MYSQL as this project has progressed and I thought there must be a way to populate the XML file using PHP and MYSQL.

So after a few google searches I found that I could create a very simple PHP script that creates an XML file that stores the media player's track data.

I started by creating the MYSQL table that will hold the track data - this will be used by the PHP script to populate the XML file.

My next step was to create the PHP file. The script can be seen in the image below.

Firstly, the SQL query gets the data from the music table and the ORDER BY keyword ensures that the latest track entered into the database appears at the top of the list in the mp3 player.
Then using PHP I have constructed the XML document, within which I have used a while loop in order to get the track name and file path from the database and insert them into the XML file.

Finally, in the MP3 Players ActionScript, where it previously linked to the XML document I have simply changed this to link to the php file.

After completing these steps I could then create a simple HTML form and accompanying PHP script so the admin can upload a new track to the MP3 player without having to edit an XML file and upload it back to the server.

I have also added a delete track form which simply deletes the record from the database where the name = the name typed in by the admin into the form.

NewJack Website - Edit/Delete Blog Posts

Since my last post I have made the blog posts so they can be edited or deleted so I am going to exlain how I have achieved this. I will also briefly go over the gigs page which I have also made into a dynamic php page populated by a MYSQL database.

Delete Blog Post
Firstly, I needed the blog page to display edit and delete buttons on each post but only whilst the admin is logged in. So within the php I wrote the html for the buttons in the blog post loop in blog.php - the pseudo code is basically if user is logged in, display these buttons. I wrapped the buttons in a form so I could use the method="post" attribute to provide information to the php script. The form includes a hidden input type, the value of which contains the $id variable of the post you want to delete. When the delete button is clicked it runs deletepost.php which simply executes an SQL query to delete the record from the table where the id=$id ($id is the variable which holds the id of the post you want to delete).

You can see on the image above that when logged in, there are options to logout, edit or delete in the head of each blog post.

Edit Blog Post
The edit button works in much the same way although the process is slightly different. When clicked, the edit button takes the user to editpost.php which features an html form reminiscent of the blog post form in the admin area. However this form is already filled in with the appropriate content by setting the field values to variables that contain data taken from the blog post you want to edit. This way, the form fields already have the existing blog post content ready for it to be edited by the user. When this form is submited, it then runs edit.php which executes an SQL query to update this particular record in the table with the new data.

In the image above you can see that when the edit button is clicked, it takes the user to the edit blog post page which features a form that is already populated with the existing blog post content ready to be edited.

Gigs Page
I have made the gigs page editable with PHP and MYSQL in exactly the same way as the blog page. The image below shows what the gigs page looks like when the admin is logged in.

The edit and delete options work in exactly the same way as I described for the blog.
The image below is the admin area page which fetaures forms to make a blog post and to add a gig.

Upload a File with Blog Post
The admin has the option to upload a file with their blog post. If they choose to do so, the file is uploaded to the /blogfiles directory and the file name (image.png or audio.mp3) is inserted into the database. Then in the blog post php script, the script reads; if the file name contains 'jpg', 'png', 'gif' or 'jpeg' then wrap it in <"img"> tags. If the file name contains 'mp3' then wrap it in <"a"> tags and show mp3image.png - when this image is clicked it goes to the audio file so it can be listened to.

NewJack Website Progress - Post a Blog and Login

In this post I am going to explain how I have created a form that allows a user to post a blog with the option of also uploading an image. I will also explain how I have created a login system so only the site admin can access the admin area and post a blog.

Posting a Blog
Firstly, I created a page with a simple html form, with fields for the blog's title, content and an upload file field. When submitted, the form runs insert.php which uses SQL to insert the form contents into the appropriate fields in the blog database table. If the user selects an image to upload, the insert.php file also uploads this image to a directory named /blogimages on the server. So if the user uploads an image called img.png, the file will be uploaded to stephengreig.co.uk/newjack/blogimages/img.png. The text img.png will be inserted into the image field in the MYSQL database table.

When the form is submitted, the form content is inserted into the blog database table as shown in the image below.

Now the data is in the database, the blog.php is updated with the new blog post.

Login System
Obviously, we don't want any random user to be able to add blog posts to the blog, so I have made the admin area page require the user to be logged in. There is a button on the blog page which reads 'admin area', which when clicked takes the user to adminlogin.php. This page simply features a html form (with username and password fields) which when submitted runs login.php.

The login.php file then checks to see if the username and password entered are in the members database table; if they aren't the user is redirected to a page which reads login failed; if the username and password entered are in the members database table then the user is redirected to the admin area page where they can then add a blog post.

It is important to note that the admin area page also features some php code that says the page requires auth.php in order for it to be displayed. The auth.php file basically checks to see if the user is logged in or not.

Also in the admin area page is a logout link which when clicked runs logout.php. This file ends the user session and redirects them to a page which tells them they have been logged out.

Remaining Tasks

Make user able to edit blog posts
Make user able to delete blog posts
Make file upload in post blog form accept image AND mp3 files
Make gigs page so it is populated using a MYSQL database
Make add/edit/delete gigs form in admin area
Make PHP contact form

NewJack Website Progress - MySQL and PHP

I've come a long way since my last blog post where I explained that all I had left to do was the PHP/MYSQL elements of the website.

A bit of a Moan
I started the project with no experience of using data driven content in a website so I've had to learn a lot in the past couple of weeks. A bit of a moan here but most of what I've learnt has come from online resources after many, many Google searches as opposed to learning through my seminars. Some PHP learning material was provided but I felt the way in which it was delivered was not particularly ideal for learning. For example being made to complete pointless exercises instead of applying what we'd learnt to our projects was particularly annoying. Last week I didn't attend a seminar so I could actually do work on my project at home instead of wasting time in a seminar applying what I'd learnt to a pointless exercise! These exercises are good hypothetic scenarios to use to learn IF WE NEED THEM but if not, I don't expect to be MADE to complete them. It's like being back at school.

MYSQL Database for Blog
This is what my database table looks like for the blog/news feed.

The table is pretty self-explanitory; there is a field for the news posts id, date, title, content and there is also a field incase the user uploads an image (this field simply stores the image's path rather than the image itself).
Below we can see the current data that the table is holding.

The blog.php page is populated using this data. After wrapping certain php variables in html tags in order for a heavy styling session with css, the blog page currently appears as show below.

MYSQL Database for blog comments
The blog I have created makes use of a commenting system. When the 'comments' link is clicked on the blog post, the page displays a single post view which shows the blog post, the comments and an add comment form - as shown below.

When the user enters information into the form and clicks submit, the data is inputted into the database. It is inserted into a separate table from the blog table and it is assigned to the appropriate blog post with the news_id field. This table is solely for storing comments.

In my next post:

In my next blog post I will show how I have created a form to post a new blog post as well as upload an image.

I will also show how I have created a login system so the admin area can be viewed only when a user is logged in.

Ste Blog

About

www.stephengreig.co.uk

#

NewJack Website - Flash MP3 Player with PHP/MYSQL

NewJack Website - Edit/Delete Blog Posts

NewJack Website Progress - Post a Blog and Login

NewJack Website Progress - MySQL and PHP

Ste Blog

About

Followers

Blog Archive

Labels

Search