Sign in to follow this  
cignox1

[web] how do I begin to make sites?

Recommended Posts

Hi all, I've just graduated and untill I get a job I would like to start studing php and web programming. This is quite new to me, but this field would let me to bind my artistic side and my CS side (not to say that here where I live this is one of the very few interesting CS job I can ever get). I know a little HTML, once I gave a look at CSS and now I'm going with PHP. My problem is that I don't know hot to use them together in order to build a site. I mean, I know how to put PHP code in a HTML file, I already installed MS PWS and everything works, but does somebody know some good tutorials? (yes, I already googled, but was only able to find introductions to HTML or to PHP, without good examples about how to actually build a simple site). Thank you!

Share this post


Link to post
Share on other sites
HTML is for defining document semantic structure (what the page/document is/means).
CSS is for defining document style (how the page/document looks/prints/reads).
PHP et al are for defining server-side interactivity.

Don't worry too much about big picture right now. Get to understanding what each of them can give you, then think about a site you would like to design and figure out a way to do it using the tools listed above. A sample starting point is creating a form in HTML, submitting it to a server-side PHP script, then generating another HTML page involving the results. Another is using the PHP request and response objects to obtain parameters directly from the URL:
http://myurl/some/directory
http://myurl/some/other/directory?a=some&b=param

Writing simple programs (or scripts, or stylesheets) is necessary in any and every programming endeavor to understand the principles of what is being done and what can be done, which then equips you to handle larger, more complex tasks (which you decompose into smaller, more familiar tasks).

Good luck, and happy hacking!

Share this post


Link to post
Share on other sites
Quote:
Original post by flery
a little off topic but if you want to develop webpages you should look into xml and xstl


I'd leave that be untill after the OP has a solid grasp of HTML, CSS and PHP.

Share this post


Link to post
Share on other sites
Web development is a funny thing in that you need to be proficient in a number of fields to be able to bring it all together. We've all seen websites that worked, technically, but looked ugly. And we've also seen websites that looked great but broke easily.

I think you need a really good grasp of HTML before moving on to PHP. But even with PHP (And perl too) it's extremely easy to write ugly, fragile code. If you write ugly, fragile HTML, it gets double-ugly. And if by chance you are trying to embed ugly, fragile javascript, it's triple-ugly.

That said, getting a good book on PHP/MySQL (might as well throw in MySQL) would be my recommendation. I'm starting to like the Wrox and Apress books, for what it's worth.

Share this post


Link to post
Share on other sites
Thank you all for answering. As I said, I already know a bit of HTML (once I even made a simple site for the band where I play the guitar), I learned some css (almost forgotten at the moment), and I'm playing with PHP. I already wrote a simple page that gets a string from the user and reloads itself writing out what the user just typed. Now I want to move on but I dont know how, or better, I would like to have a source that explains how common components of a site are usually done. I just brought a book on PHP, and don't have the money right now for another one. Are there some useful sources over the net?

Share this post


Link to post
Share on other sites
Hey cignox1,

I'm actually in the process of making my first dynamic website at the moment too, and maybe can give you some tips on how I have gone about making it. It may seem quite a daunting task at first, but if you split the entire process down into a number of smaller sections/chunks and tackle each one at a time, it'll make it much easier.

I've broken it down into the following steps:

1) Get your idea down on paper. I've simply been drawing out what I'd like the different pages to look like and where the different bits of content will go.

2) Once you have a page design you like, split it up into a number of different sections. Doing this will make it easier when you start writing the actual site as you can place all the seperate sections into < div > tags.

3) Create a mock-up of what the site will look like using just HTML and CSS. Before you start to overcomplicate things by adding PHP, it is useful to have what the site will look like when complete. This will simplify things when you come to write the PHP code, and actually was where I failed when first attempting to create a website.

4) Start to add the PHP code that gets the page content from a database.

5) Finally, add an admin section to allow you to easier manage the site content.

Obviously there are other ways of creating a site, but I've found this to be pretty good so far. I've only actually just finished making the mock-up myself and got all the PHP goodness to look forward too :].

Good luck with it,

Michael

Share this post


Link to post
Share on other sites
Ive had an on off relationship with Web Development over the years, but am now currently doing it as a Job.

The biggest piece of advice that I could give you is to plan plan plan. I usually go through the following steps.

Get the requirements and produce a design of the site, first on paper, and then a high fidelity one using photoshop so I know exactly what the design is to look like.

From then one, I break everything into its component parts. First of all, I build a rough template using HTML so I can work out where each section needs to go (i.e. links to the left, header at the top). I start creating the sites appearence using CSS and graphics to build a working page.

If im building something that uses PHP/MySql then the process is slightly different, but I carry out all the previous steps with my code in mind, and then implement it. Maybe its just me, but I find it a pain in the ass to write out my code and then structure a GUI around. I find it far easier to already have a design in place and then neatly tuck my code in behind that. I guess its just down to personal preference though.

Share this post


Link to post
Share on other sites
Well first thing first, make sure you havev a very good grasp of HTML before doing anything. You really can't escape HTML seeing as for output (even in php) you are printing out html code after the server side processing is done. PHP is Pre Hypertext Processor, so it does everything before you even load the content into the page. So I'd go to HTML tutorials first:

http://www.pageresource.com/html/index2.htm

There are better ones out there just as a heads up.
Just go to google.com and type in Beginning HTML tutorials and you'll get a load of information. Then after you feel you have a solid grasp on HTML, I'd go into PHP only then. If you want to learn CSS it really doens't matter what order you do it in I guess b/c you already know HTML so CSS methods should be easily applied. I'm assuming you already know how work the design methods for a site (making the appearence/layout/theme/etc look good) by your statment with being good with Photoshop CS and if I'm not mistaken you said you took a class on it so you should be good there. When learning PHP, I'd also look into MySQL since they go hand in hand and chances are you'll want to store data in a database at some point (stay away from I/O as much as you can it just creates a lot of overhead). A good program to start out with (on a testing enviroment only of course) would be to go to http://www.apachefriends.org/ and download xampp to turn your computer into a testing server.

Download for Windows: http://www.apachefriends.org/en/xampp-windows.html
Download for Linux: http://www.apachefriends.org/en/xampp-linux.html

You can test out php and mysql with that program.
That's my piece :)

Share this post


Link to post
Share on other sites
Thank you all for your help, I will now study HTML and CSS better, and I will build a 'fake' site just to implement something. Probably most of my confusion concerns what should be done in standard HTML/CSS and what with PHP, and how everything should be merged into the final result. I would like to see some real example in order to see how those tools are used in real sites, but for now I will get some better knowledge with them.
Thank you again.

EDIT: by the way, my first exercise was right about mysql connection and data retrival. Setting up the PHP enviroment for this has not been an easy task, but the actual code for the connection and sql query is really simple :-)

Share this post


Link to post
Share on other sites
If you want to properly separate HTML/CSS and PHP, take a look at templating egnines. I love using Smarty.

I build my sites pretty much as Sonnenblume said, except that after the final HTML is done, I tear it to pieces (headers, footers, blocks), put it in templates and write the business logic required to power the site. I do this even for small sites. E.g. Le Clos Dringuet. The logic side is quite simple for that one. Just mod_rewrite to get nice URL's, a dynamic menu (not all languages implement all pages. There's translation work to do) and a dynamic photo gallery.

Share this post


Link to post
Share on other sites
Sander beat me too it.

Theoretically PHP should not be used to "print" anything. Ideally you would have the logic and presentation separate.

What i would do is create the HTML "shell" like others suggested, and just print the guts of the program output into the middle of it.

For smaller projects, i just try to control all the output in one place with a simple "page" class that i use like this:

$page = new Page();
$page->AddContent("bla bla bla bla bla");
$page->AddContent("foo foo foo foo foo");
$page->AddContent("bar bar bar bar bar");
$page->PrintOut(); // automatically adds headers and footers

I cringe when i see "print" in php code for anything but the most trivial scripts. For larger projects i would use a full-on templating system like smarty too.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this