My first website

[arbitter]

Hello,

 

I've made my first website and am still working on it daily. http://www.fransdepypere.be/. Currently it's all built up with tables, but I'm putting all my pages in one php file now and I am going to try to work with div's. Be aware, the site is in dutch though

It's a site for my family, it's probably not so secure and stuff, but I don't really expect any hackers or something As I said, still working on it daily. Only put up the colors in the upload's menu today, and almost have a better system for the names of the files (Januari2010 to Januari 2010). I'm going to try to implement a guestbook too, so people can 'keep in touch'.

All the people of my family have a login and password, and when they login the 'login' in the menubar turns into 'upload' and 'account', from where they can upload files and in account they can change their password, see their details and log out.

The index page is very skinny, don't really know what layout I should give it. Because now it kinda seems like an empty site I think. Perhaps some tips on that?

And it's not fully validated with w3c validator, bu index and the photo's page if you havn't selected any folder.

 

Anyhow, I'll let you guys do the judging

http://www.fransdepypere.be/

 

[zeodragonzord]

Just a quick glance, looks good.  The first red flag is that I noticed the images took a little longer than it should to load.  Since you'll want to minimize as much data to transfer to the visitor's computer, resize those images so that it is the same size as how you see it on the page.  As in, don't put an image on the page and set the image size to be smaller than it is.

 

By the way, there's a Website Critique board here.  You'll probably get more useful feedback there.

[arbitter]

Well, this is the website critique bord

 

And I though that if I resized the images too much, the quality would be bad... At the moment I have them resized to 1000px width, and I show them at 600px width, because I thought otherwise they wouldn't be detailed enough... Can change that in a glance though. Also I'm not sure if the current width of the images is good, so if I save them as 1000px I can still show them at say 700px if I change the layout or something..

 

But I'll change it to 700px then, that'll save some data

[zeodragonzord]

Oops, my bad.  I thought I was in the PHP Coding Help board; I clicked on 'Show unread posts' and forgot that it takes posts from all the different boards.

 

If you have an image that has a high resolution, but it is shrunk, it'll actually look worse.  Your browser will attempt to shrink it and in turn will look jagged.  Having the image at 1000px and then showing it at 600px will not help image quality; there's only so many pixels the monitor will display.  The other 400px are either thrown out or estimated to fit in a smaller space.

[arbitter]

Hmm ok, I guess I'll change that then

thanks a lot!

[xcandiottix]

I like it. It seems very easy to navigate so even your 'older' relatives should be able to navigate it easily... I think the more simple you can keep it the better. If your family uses any other social networking site you want want to add "Share" banners so people can tweet, facebook, blah blah blah whatever postings you have up. Great concept tho.

[arbitter]

Don't think my aunts are so active on facebook, and most certainly not my grandfather. He got a free pc and internetconnection for a project f a friend of his, to 'get older people in the internet'. But it's really hard for old people to go on the internet, and in general, work with computers. So I made this site so he can see pictures of relatives, though it's not really been very used But at least I had and have something to create.

[litebearer]

Might consider using thumbnails, that when clicked open the larger version of the pics

[arbitter]

Might consider using thumbnails, that when clicked open the larger version of the pics

So you have to make  thumbnail of each picture for that too?

[zeodragonzord]

Yea, for each photo you have, create a thumbnail version.  The idea is that you want to show as many photos on the page quickly with the thumbnails so that if the visitor wants to see the full sized photo, they'll click on it.  That means, their computer will only take the time to download what they want to see, not all of it.

[arbitter]

Hm yes I'll think about. It'll make everything zo complex again

[zeodragonzord]

Yea, most people don't know what developers go through to make the website look easy to use.  But, if you make it look easy, you're doing a good job.

[arbitter]

On another note; is it good to have all of your website in 1 file and using $_GET all the time, or is it better (faster) to have a different file for each thing?

[zeodragonzord]

Explain how you would use a $_GET to do that.

 

I generally code each page in its own file.  First of all, it's organized, one file per page.  Second I'll know exactly which file to update instead of fishing around one giant file to see where my code stops and ends for a particular page.  This is important when the number of pages grow.  If you're using version control software, you'll be able to tell which pages/files have been updated and at what time.  If you have one file, you can't tell.  I strongly suggest breaking the site up into multiple files.

[arbitter]

well, just have for example:

index.php?dir=index

index.php?dir=photos

...

 

And then:

if($_GET['dir'] == 'index'){
   echo "here is my index";
}
if($_GET['dir'] == 'photos'){
   echo"pictures 'n stuff";
}

 

I use notepad++ to edit my site, and it's quite easy to only select the dir you want because you can minimalize each if. So like that, it is quite easy. Ofcourse it's more annoying to make averything work with each other and stuff (with the variables). But my brother was making his site (also his first site) with everything in 1 file and I was wondering if that was better/easyer/whatever than using different files.. Because i have like 20 files on my page now, because when I try a new version of a page I let the old one stand

[zeodragonzord]

On a really small site, you can get away with it, but as you develop larger sites, you'll find that putting all in one file is very very hard to maintain.  It's better to get into the habit of separating pages into files now when you're first learning.  Many sites go further than that and take up many files just to make up one page.

[arbitter]

Then I'll keep it like it is now

Thanks for the help!

[thewooleymammoth]

<?php
//name your page according to what you want in the get
if(isset($_GET['page']))
  include('includes/'.strip_tags($_GET['page']).'.php')//this is not very secure look up filtering strings for more security.
else
  include('includes/home.php');
?>

 

if somone typed in index.php?page=uploadpics your site would go into the directory "includes/uploadpics.php".

this also allows you to have a uniformed look

<head>
</head>
<body>
<div id='main'>
<?php
//name your page according to what you want in the get
if(isset($_GET['page']))
  include('includes/'.strip_tags($_GET['page']).'.php')//this is not very secure look up filtering strings for more security.
else
  include('includes/home.php');
?>
</div>
</body>
<!-- etc etc etc -->

 

also, consider that people have different resolutions so you may want to have your site in a div and be about 950px wide and centered. it looks strange spread out across my ginat monitor

[arbitter]

but if you use strip_tags(), it's safe, isn't it?

Currently I don't use any of those, but if you don't get the right parameters you don't get to see anything.  Though, for example, if you're looking at the fotos and type "../" after month= you do get a picture somewhere from the root so I guess it's not that safe... And I guess you can use javascript or mysql or server commands to change stuff too, I'm no hacker.

I just don't know what to do about it

 

And I'll try putting it in a div, don't know what color the site'll be outside the div though... or at least, what the best color would be..

[KevinM1]

but if you use strip_tags(), it's safe, isn't it?

 

Not really.  You're 'safe' right now as, presumably, you're not using your $_GET data to access a database, or anything critical (file upload page).  If your site grows, you should definitely consider changing navigation strategies.  The risk of SQL injection or a user with bad intent gaining access to a critical area of your site is too great not to.

 

Currently I don't use any of those, but if you don't get the right parameters you don't get to see anything.  Though, for example, if you're looking at the fotos and type "../" after month= you do get a picture somewhere from the root so I guess it's not that safe... And I guess you can use javascript or mysql or server commands to change stuff too, I'm no hacker.

I just don't know what to do about it

 

Ideally, for something this small, you'd simply have a PHP page for each main component of your site.  So, one for your index, one for displaying the photos, etc.  From there, you could use $_GET to retrieve the correct batch of data (even better to use $_POST, as at least the address bar couldn't be used as an avenue of attack), but only after validating it.  You never, ever, ever, ever trust user input, regardless of whether or not it comes from $_GET, $_POST, $_COOKIE, or the catch-all $_REQUEST. 

 

Code defensively.  Validate all input, even if you think it's safe.

[arbitter]

but if you use strip_tags(), it's safe, isn't it?

 

Not really.  You're 'safe' right now as, presumably, you're not using your $_GET data to access a database, or anything critical (file upload page).  If your site grows, you should definitely consider changing navigation strategies.  The risk of SQL injection or a user with bad intent gaining access to a critical area of your site is too great not to.

 

Currently I don't use any of those, but if you don't get the right parameters you don't get to see anything.  Though, for example, if you're looking at the fotos and type "../" after month= you do get a picture somewhere from the root so I guess it's not that safe... And I guess you can use javascript or mysql or server commands to change stuff too, I'm no hacker.

I just don't know what to do about it

 

Ideally, for something this small, you'd simply have a PHP page for each main component of your site.  So, one for your index, one for displaying the photos, etc.  From there, you could use $_GET to retrieve the correct batch of data (even better to use $_POST, as at least the address bar couldn't be used as an avenue of attack), but only after validating it.  You never, ever, ever, ever trust user input, regardless of whether or not it comes from $_GET, $_POST, $_COOKIE, or the catch-all $_REQUEST. 

 

Code defensively.  Validate all input, even if you think it's safe.

Well as for the possible user input;

Images that are uploaded can only be with a certain extension (.jpg/.gif/..)

And for login, I have strip_tags(), and that connects to a MySQL database... so I think it's possible that people can login using a mysql command? Not sure about that.. (please do not try though )

[thewooleymammoth]

use mysql_real_escape_string(); for login or mysql related variables.

[KevinM1]

Well as for the possible user input;

Images that are uploaded can only be with a certain extension (.jpg/.gif/..)

And for login, I have strip_tags(), and that connects to a MySQL database... so I think it's possible that people can login using a mysql command? Not sure about that.. (please do not try though )

 

Malicious code can be inserted in image files.  Be sure that things like image.php.gif and the like can't get through.

 

Also, strip tags doesn't do anything to protect your database.  Don't know where you got that idea.  It's useful in ensuring that user submitted data (like a blog comment or forum post) doesn't contain malicious code, but that's it.  Again, always validate and escape user input, even if it's just you logging in.  This means:

 

1. Checking to make sure that user submitted input is well formed.  A field that requires an integer should only contain an integer.  A field for an e-mail address should only accept a legit address.  RegEx and other checks (is_integer, for example) should be used here.

 

2. Escaping all data that will interact with your db.  This will prevent injection attacks.  And, no, addslashes won't cut it.  You need to use the escape function that's related to the db you're using (like, say, mysql_real_escape_string).

 

This is internet security 101.  If you don't learn it now, your bigger projects will inevitably suffer.

[zeodragonzord]

Pear MDB2 may help secure your MySQL queries, using prepared statements and such.

[arbitter]

mysql_real_escape_string();

that's what I needed.

I'll give is_integer() a view too.

 

Momentarely the emailadress does have s cript that controlls it, but I didn't make that, but I did study it and understood it.

 

As for more security problems; I don't really know a good place to find these things. Anyone have a good site considering safety?