Myspace-like clone here!

Status
Not open for further replies.

mygorillanet

New Member
Messages
40
Reaction score
0
Points
0
Alot of people are having trouble finding a really good social networking script at an affordable price. Would it not be good if you could write one yourself ?

In the next few weeks, I shall show how simple it is to write such a script. Ill provide you with a detailed tutorial of how to start from scratch and end up with a multi-functional website.

I can only do this however, if anybody shows an interest in the project I am hoping to undertake.

So if you are interested, do not hesitate, do reply with an 'aye' and maybe you can put forward your requests for which language to script in or which modules should be included in the tutorial.

Otherwise, get yourself a copy of WampServer or set-up a suitable web-server environment on your pc and make certain all is fully functional. the next time I write, it shall be the beginning of lesson 1.

C U L8R !
 

port5900

New Member
Messages
150
Reaction score
0
Points
0
hook it uo dude i'm always down to learn some thing useful
and how about PHP -=)
 

iholla

New Member
Messages
68
Reaction score
0
Points
0
I am interested in the idea. I would like to learn more and contribute too:)) I will be waiting for more on this!
 

mygorillanet

New Member
Messages
40
Reaction score
0
Points
0
Lesson #1 - Essential Preparations

I am assuming that you have installed and fired up your local web-server successfully. You can leave it at that for now.

Before we dig into any coding however, we need to make a few simple but vital preparations.

1. Website Services
We need to decide which modules our website will implement and our target audience. Since this will be a community site then, the audience will largely depend on content and design.The modules we shall use are as listed;

- menus module - sign-up module - login module - user profile related modules - file upload modules - messaging module - user search module - blogs module - forums module - shout box or chat module - security modules -

2. Website layout and colors
Now that we know what modules shall be in our site, its time to think of designing a graphical representation of what we would like our site to look like. This can be done using any preferred image editor. My suite of choice for such simple graphics is Fireworks.

Create a new canvas of say 800 x 700 and start drawing boxes to represent tables, columns, rows, menu panels, picture frames etc. Fill the shapes with colours that suite your taste as you go. For boxes representing picture borders or frames, fill them with different resized pictures to see what they might look like. Play with border colors and fills till you like what you see.

Place text objects where menus should be and try to keep their font colors and sizes as close as possible to what your final web product will look like. This process is pretty tedious but all the time you put into this layout design will save you a lot more time once we begin coding and placing our objects.

Once you have your layout completed, save the image in an editable format. i.e if you are using photoshop, keep the file in .psd format, for fireworks, its the .png fomat. This will help us when we need to re-visit the layout design in order to change the color shades so that everything is blending perfectly.

Note: Since we shall be using php, almost no images will be placed on this site. The only images we shall display will be user photos and a few tiny icons. This is in order to ensure that load time is more affected by php processing than image dowloading.

3. Web development environment
Our web server is running, we have a design goal, we have a step by step plan, we have a complete layout, we are almost ready to start getting ugly with our code.

This is when you start thinking of which editor you are going to use. I shall be using dreamweaver...for obvious reasons. If you have a copy, then you wont get lost.

If you opt for another application, make sure you can code and debug your php, html, javascript, css easily. With Dreamweaver, error in syntax is highlighted and solutions offered. This will save us a lot of time.

There is a basic directory structure that I recommend you use for your public folder. An example, if our website is 'clone';

clone/include
clone/functions
clone/modules
clone/themes/default/images
clone/temp/
clone/pictures
clone/music
clone/videos
clone/safe

I shall explain the use of each folder as we get to it. I might add more folders as the necessity arises. For now, that should suffice.

4. Preparing and creating our database tables.

This is where we shall start from next time. I request any of you who are still interested to post a layout you have designed so we may use it as our goal for the project. It can be as simple as a child's doodle.

--------------------------------------------------------------------
If you like my tutorial so far, please do add it to my rep. Thx. See You Soon!!
--------------------------------------------------------------------
 

mygorillanet

New Member
Messages
40
Reaction score
0
Points
0
Are you done with lesson #1

Is anybody done with lesson #1 ?

Two days and no feedback or reputation added since I started. I wouldnt like to be that guy who is writing himself a crazily hefty tutorial:))

So, whenever you are ready, drop me a private message and we shall continue:)
 

iholla

New Member
Messages
68
Reaction score
0
Points
0
Myspace went opensource I think.

Oh really? Where could I download the source script of the myspace website MaestroFX1? Maybe you have a copy you could share with us? By any chance, is facebook open source too Maestro?
 

mygorillanet

New Member
Messages
40
Reaction score
0
Points
0
I do not know where Maestro FX got his info but so far I haven't come across any free distribution of the myspace source.

Thank you to those that PM'ed me and added this post to my rep. I shall continue with the next installation of the tutorial within 24hrs...I have been busy.

see you soon!
 

mygorillanet

New Member
Messages
40
Reaction score
0
Points
0
Lesson #2 - Installing The Databases part 1...

part 1....
I am sorry I haven't been available for a while. Stuff to do:)

Anyway, we are going to be using the layout as displayed on url;

http://gorillanet.pcriot.com

Since we know how our site is going to be organised and which services we are going to provide, then, the menu will help us in building a strong and correctly associated database system.

1. The User Profile
Community sites are made up of information about users and their activity on the website. So, keeping our project simple, let us decide which info should be displayed on the user profile

user_name, user_age, user_status, user_married, user_sex, user_email, user_city, user_country, user_photo

In such a profile, all information can be stored in one table. However, since our users shall be uploading other photos as well apart from their profile photos, then we shall need another table specifically to store photo types and their urls. This, we shall come across later.

As we progress into our tutorial, there will be more functionality added to the user_profiles. This inevitably will require that we alter the user tables. All shall be done as the need arises. For now, we keep it simple.

Go to your favourite dbms and create a database. In our case, my example database is called 'gorillanet'. After your database is created, write a php script as shown below and execute it.

note: we are using a php script to create our table so that writing an installation script for our site will not be done from scratch.

The php script to create our table; do not include green text in your code. Just copy and paste but remove all green text. Then execute.

#below we set the database connection parameters. these i usually keep in an external file but for our purposes, we shall leave them within. please substitute the values with those on your system

$db_host = localhost #your database server
$db_user = admin #your database user
$db_pass = admin #your database password
$db_name = gorillanet #wat database you are using


#below, we use the set parameters to connect to our server, select the database of interest and create a user table in it.

mysql_connect($db_host,$db_user,$db_pass)or die(mysql_error());
mysql_select_db($db_name)

#after selecting the database above, we then create a new user table called 'gorillanet_users'

mysql_query ('CREATE TABLE `gorillanet_users` (
`id` int(11) NOT NULL auto_increment,
`user_name` varchar(40) NOT NULL default \'\',
`user_password` varchar(32) NOT NULL default \'\',
`user_email` varchar(100) NOT NULL default \'\',
`user_sex` varchar(40) NOT NULL default \'Not Specified\',
`user_status` int(2) NOT NULL default \'0\',
`user_city` varchar(40) NOT NULL default \'Not Specified\',
`user_country` varchar(40) NOT NULL default \'Not Specified\',
`user_age` int(11) NOT NULL default \'0\',
`user_picture` int(11) NOT NULL default \'0\',
PRIMARY KEY (`id`)) ;');

Please read the comments in green to avoid any errors.

2. New user registration.
We have a user table but it is empty. We can fill it with dummy data or create a sign-up script. The script will be simple and basic. We shall improve it with time.

The registration form can be in html or php. Create a new file, register_user.php and add the following code.

<table style="margin-top:50px; margin-left:50px; width:500px; background-color:#FFE4CA" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" style="height:35px; background-color:#FF9900; padding-left:20px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:16px; color:#FFFFFF; font-weight:bold" valign="middle">Register Here</td>
</tr>
<form action="add_user.php" method="post">
<tr>
<td style="padding-left:20px; padding-top:10px; height:20px; width:200px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px" align="left" valign="middle">username:</td>
<td style="width:300px;padding-left:20px; padding-top:10px;" align="left" valign="middle">
<input name="username" type="text" size="40" maxlength="40">
</td>
</tr>
<tr>
<td style="padding-left:20px; padding-top:10px; height:20px; width:200px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px" align="left" valign="middle">password:</td>
<td style="width:300px;padding-left:20px; padding-top:10px;" align="left" valign="middle">
<input name="password" type="text" size="40" maxlength="40">
</td>
</tr>
<tr>
<td style="padding-left:20px; padding-top:10px; height:20px; width:200px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px" align="left" valign="middle">email:</td>
<td style="width:300px;padding-left:20px; padding-top:10px;" align="left" valign="middle">
<input name="email" type="text" size="40" maxlength="40">
</td>
</tr>
<tr>
<td style="padding-left:20px; padding-top:10px; height:20px; width:200px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px" align="left" valign="middle">sex:</td>
<td style="width:300px;padding-left:20px; padding-top:10px;" align="left" valign="middle">
<input name="sex" type="checkbox" value="Male"> <font style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px">Male</font>
<input name="sex" type="checkbox" value="Female"><font style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px">Female</font>
</td>

...see part 2
 

mygorillanet

New Member
Messages
40
Reaction score
0
Points
0
Lesson #2 - Installing The Databases part 2

part 2.

</tr>
<tr>
<td style="padding-left:20px; padding-top:10px; height:20px; width:200px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px" align="left" valign="middle">age:</td>
<td style="width:300px;padding-left:20px; padding-top:10px;" align="left" valign="middle">
<input name="age" type="text" size="40" maxlength="2">
</td>
</tr>
<tr>
<td style="padding-left:20px; padding-top:10px; height:20px; width:200px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px" align="left" valign="middle">city:</td>
<td style="width:300px;padding-left:20px; padding-top:10px;" align="left" valign="middle">
<input name="city" type="text" size="40" maxlength="40">
</td>
</tr>
<tr>
<td style="padding-left:20px; padding-top:10px; padding-bottom:10px; height:20px; width:200px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px" align="left" valign="middle">country:</td>
<td style="width:300px;padding-left:20px; padding-top:10px; padding-bottom:10px;" align="left" valign="middle">
<input name="country" type="text" size="40" maxlength="40">
</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FF9900;padding-left:20px; height:35px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px" align="left" valign="middle">
<input type="button" value="register" width="40">
</td>
</tr>
</form>
</table>

Next, create file in same directory and name it add_user.php. This is the file that will process our registration.

#below we set the database connection parameters. these i usually keep in an external file but for our purposes, we shall leave them within. please substitute the values with those on your system

$db_host = localhost #your database server
$db_user = admin #your database user
$db_pass = admin #your database password
$db_name = gorillanet #wat database you are using


#below, we use the set parameters to connect to our server, select the database of interest and create a user table in it.

mysql_connect($db_host,$db_user,$db_pass)or die(mysql_error());
mysql_select_db($db_name)

sql_query("INSERT INTO gorillanet_users (user_name, password, user_email, user_sex, user_city, user_country, user_age) VALUES ('".$_POST['username']."', '".md5($_POST['password'])."', '".$_POST['email']."', '".$_POST['sex']."', '".$_POST['city']."', '".$_POST['country']."', '".$_POST['age']."')");
header('Location: login_user.php');

Finally, on successful registration, you should be directed to a login page or home page. In this case, we use a dummy login page, login_user.php. Create such a file and add to it this code.

<table style="margin-top:50px; margin-left:50px; width:500px; background-color:#FFE4CA" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" style="height:35px; background-color:#FF9900; padding-left:20px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:16px; color:#FFFFFF; font-weight:bold" valign="middle">Login Here</td>
</tr>
<tr>
<td colspan="2" style="padding-left:20px; padding-right:20px; padding-top:10px; padding-bottom:10px; height:50px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px" align="left" valign="middle">your login form should go here. next, we shall be tackling user processing and login. for now, try to add more fields to your user_table and figure out how to login.</td>
</tr>
</table>

Now, I leave it up to you to figure out how to process user login. Try and create a login form using the registration form as a template. Next week, we shall login the user to his/her personal page and be able to add fields to the user profile.

We shall add a user search mechanism and finalise the basic layout into php code.

The layout will have a header section which contains the logo and menus and a footer section to carry policy, terms and copyright links.. The main section of our layout will be made of the requested pages. This means, no matter which page is visited, our layout will always carry the same header and footer. For today's example, if we had a header, it would be included at the top of each of our php scripts. the footer at the bottom of each.

Homework:
1. create a login form and try to process user logins. On successful logins, the user should be directed to a page with the greeting "Welcome user_name". If the login fails, user should be shown error message.

2. do error controlling in the registration form and registration processing mechanism. an example is, preventing similar usernames, empty fields e.t.c

3. find a way to include reduntant code into all files that may require it without re-typing the code over and over. an example is the styling of our tables and text and also the database connection parameters.

Next week, we code our layout to include the logos and images and successfully login our users to their respective pages.

Good luck!

ps: all tutorial related questions can be sent to my personal inbox.

seriously, if you find my post helpful, please add it to my rep
 

Jesse

Active Member
Messages
1,360
Reaction score
0
Points
36
I have a myspace clone script which i found on the net while surfing. Anyway thanks for this tutorial.
 

iholla

New Member
Messages
68
Reaction score
0
Points
0
Thanx gorilla for the tutorial. I am following this keenly. I am however also interested in jesse's comment about a my-space clone. Can anyone tell me where to download one. Just PM me a link or clue or something...please:(
 

Derek

Community Support Force
Community Support
Messages
12,882
Reaction score
186
Points
63
I think there is one called PHPmyspace gold?
 

mygorillanet

New Member
Messages
40
Reaction score
0
Points
0
I am aware of the existance of community software clones and freebies. I just wanted to help people write their own or modify that which they have downloaded.

I put this project on hold for now. I thank all those who have been following and I hope the answers I have given to your questions were satisfactory.

Anyone who is still interested, PM me and Ill give you a link where you can follow through with the rest.

In the meantime, I kindly request Jesse to post a link to his copy of the myspace-clone where other can download it too.

Afterall, the title does say 'myspace-like clone here'

Thanks.
 

lordtron

New Member
Messages
85
Reaction score
0
Points
0
Awesome dude...can't wait to have my own social network up and running...
 
Status
Not open for further replies.
Top