Omnimaga

General Discussion => Technology and Development => Web Programming and Design => Topic started by: squidgetx on September 20, 2011, 09:57:17 pm

Title: Making a webcomic: "dynamic hyperlinks"
Post by: squidgetx on September 20, 2011, 09:57:17 pm
Yeah, so I'm starting my first foray into web development (yay!) And I'm trying to build a webcomic (yay!) Except I don't know how.

I get html and css, the design isn't the problem. The problem for me are the "next" and "previous" buttons. I can think of two ways to make them work properly:

1) Every webpage has unique hyperlinks (pain in the butt and kinda inefficient)
2) Use some scripty thing to define where these buttons will direct the user.

So, my question is, what's the best way to do this? Am I overestimating how inefficient option 1 will be? How can I even do option 2? I skimmed over some javascript/php/asp tutorials but nothing jumped out at me as being able to do this.

Note: The comics would be numbered I guess. Like XKCD and cyanide/happiness and every other webcomic there is. LOL

Thanks in advance :D
Title: Re: Making a webcomic: "dynamic hyperlinks"
Post by: Juju on September 20, 2011, 10:09:52 pm
Yeah, you would get the comic number from the url ($_GET in PHP) then do +1 and -1 for the mext amd prev buttons.
Title: Re: Making a webcomic: "dynamic hyperlinks"
Post by: BlakPilar on September 20, 2011, 10:12:37 pm
Yeah, you could use PHP like Juju said or, my personal favorite, ASP(.NET).
Title: Re: Making a webcomic: "dynamic hyperlinks"
Post by: XVicarious on September 20, 2011, 10:13:34 pm
Use PHP, its pretty much standard. And there are WAY more resources out there. Hell I could help you.
Title: Re: Making a webcomic: "dynamic hyperlinks"
Post by: squidgetx on September 20, 2011, 11:00:45 pm
Hmm, could I get some help? It's kinda annoying that I can't test out PHP scripts offline, i'm waiting for the nameservers to resolve atm.

I see that the $_GET function gets the variable off the url, so if the variable is p and the url is blah/?p=10 the $_GET[p]=1, right? Then what- do you just do like $_GET[p]+1=$_GET[p]?
Title: Re: Making a webcomic: "dynamic hyperlinks"
Post by: cooliojazz on September 20, 2011, 11:12:08 pm
Code: (php) [Select]
<?php $cur $_GET[&#39;p&#39;]; ?>
<a href="/?p=<?php echo $cur 1?>"><img src="thebestprevbuttonever"></a><a href="/?p=<?php echo $cur 1?>"><img src="thebestnextbuttonever"></a>
This would show two buttons, one linking to the previous comic, one linking to the next. (You could also add something like changing "$cur - 1" to "$cur > 0 ? $cur - 1 : 0" and "$cur + 1" to "$cur < $max ? $cur + 1 : $max" for safety as long as you always changed $max to the current comic number)  Need anything else?
Title: Re: Making a webcomic: "dynamic hyperlinks"
Post by: Eeems on September 20, 2011, 11:21:41 pm
Hmm, could I get some help? It's kinda annoying that I can't test out PHP scripts offline, i'm waiting for the nameservers to resolve atm.
You should try working with xampp for offline testing :)
http://www.apachefriends.org/en/xampp.html
http://portableapps.com/apps/development/xampp
Title: Re: Making a webcomic: "dynamic hyperlinks"
Post by: squidgetx on September 21, 2011, 11:15:38 am
Code: (php) [Select]
<?php $cur $_GET[&#39;p&#39;]; ?>
<a href="/?p=<?php echo $cur 1?>"><img src="thebestprevbuttonever"></a><a href="/?p=<?php echo $cur 1?>"><img src="thebestnextbuttonever"></a>
This would show two buttons, one linking to the previous comic, one linking to the next. (You could also add something like changing "$cur - 1" to "$cur > 0 ? $cur - 1 : 0" and "$cur + 1" to "$cur < $max ? $cur + 1 : $max" for safety as long as you always changed $max to the current comic number)  Need anything else?

Oh wow, I didn't realize that php outputs html LOL. Thanks :D. So just to clarify, I would then have to name each comic's page /?p=#, correct?
Title: Re: Making a webcomic: "dynamic hyperlinks"
Post by: Eeems on September 21, 2011, 02:09:52 pm
Oh wow, I didn't realize that php outputs html LOL. Thanks :D. So just to clarify, I would then have to name each comic's page /?p=#, correct?
No, you would have to somehow fetch the image of each comic with this one page. Something like:
Code: [Select]
<img src="img/page_<?php echo $cur?>.png"/> you would then store all your comics in img/ named page_#.png
Title: Re: Making a webcomic: "dynamic hyperlinks"
Post by: cooliojazz on September 21, 2011, 02:15:39 pm
well, it would be one file, "index.php" which you can pass different arguments for the page numbers.  That code just takes the argument and outputs buttons linking to the right page, so you don't really "name" them, other than the one main file, which is probably going to be index.php.  Does that make sense and answer the question?
Darn you ninjas!!! But yes, also what Eeems said =P
Title: Re: Making a webcomic: "dynamic hyperlinks"
Post by: Eeems on September 21, 2011, 02:25:09 pm
well, it would be one file, "index.php" which you can pass different arguments for the page numbers.  That code just takes the argument and outputs buttons linking to the right page, so you don't really "name" them, other than the one main file, which is probably going to be index.php.  Does that make sense and answer the question?
I was thinking about saying something about index.php
Darn you ninjas!!! But yes, also what Eeems said =P
You should turn on the option to keep people from ninja'ing you
Title: Re: Making a webcomic: "dynamic hyperlinks"
Post by: squidgetx on September 21, 2011, 03:47:48 pm
Ok, I see. Wow, php is pretty powerful lol. And then for alt text and stuff should I use an xml file?
Code: (xml) [Select]
<1><title>Title</title><alt>Alt text</alt></1>
Code: (php) [Select]
<h2><?php echo $xml->$cur->title ?> </h2>
<img.... title=<?php $xml->$cur->alt ?>>

Does this work?
Title: Re: Making a webcomic: "dynamic hyperlinks"
Post by: Eeems on September 21, 2011, 04:25:40 pm
Ok, I see. Wow, php is pretty powerful lol. And then for alt text and stuff should I use an xml file?
Code: (xml) [Select]
<1><title>Title</title><alt>Alt text</alt></1>
Code: (php) [Select]
<h2><?php echo $xml->$cur->title ?> </h2>
<img.... title=<?php $xml->$cur->alt ?>>

Does this work?
I'm not sure if that works. You could always use flat text files for each of them, so have title/ contain page_# with the title text/page_# contain the alt text etc
Just use file_get_contents("path/to/file_{$cur}"); to get the contents of the file.
Title: Re: Making a webcomic: "dynamic hyperlinks"
Post by: squidgetx on September 21, 2011, 04:56:33 pm
So every comic would then be accompanied by 2 txt files, one like named alt1 and the other named title1? I see how I can use file_get_contents, but is there a way to have all the titles and text in one file? Or am I not understanding what you're saying?
Title: Re: Making a webcomic: "dynamic hyperlinks"
Post by: Eeems on September 21, 2011, 04:59:18 pm
You could use xml, I'm just not sure if you can access it that way, feel free to try it out though. You could also use flat text files if you did some nice formatting, like grabbing the title from the first line, the alt text from the second line and the rest of the content from whatever is leftover.
Title: Re: Making a webcomic: "dynamic hyperlinks"
Post by: squidgetx on September 21, 2011, 05:37:10 pm
I think I can figure this out...

On a new subject, what are some good free webhosting places? I'm looking for some 200+mb space, php, and ad-free. Also it would be nice if the hosting is reliable, etc. and doesn't insert their own scripts into my webpages
Title: Re: Making a webcomic: "dynamic hyperlinks"
Post by: Eeems on September 21, 2011, 05:51:04 pm
I think I can figure this out...

On a new subject, what are some good free webhosting places? I'm looking for some 200+mb space, php, and ad-free. Also it would be nice if the hosting is reliable, etc. and doesn't insert their own scripts into my webpages
freehostia should work for a while I would think. You could also probably ask netham or albert if they can spare some space for you.
Title: Re: Making a webcomic: "dynamic hyperlinks"
Post by: sqrt(Time) on September 21, 2011, 06:44:49 pm
Zymic is a little-heard-of, but very nice one in my experience... they also give you MySQL databases, and limited .htacess allowance,
Title: Re: Making a webcomic: "dynamic hyperlinks"
Post by: Spyro543 on September 21, 2011, 08:47:29 pm
Ask Juju for awesome hosting.
Title: Re: Making a webcomic: "dynamic hyperlinks"
Post by: Juju on September 21, 2011, 09:11:01 pm
Ask Juju for awesome hosting.
^_^
Title: Re: Making a webcomic: "dynamic hyperlinks"
Post by: squidgetx on September 21, 2011, 11:30:56 pm
Haha, well I'll wait until I get it working completely before I do anything...atm I'm just using a random free host to test out the php and stuff.

The xml isn't working, plus I realized it's probably not the best idea to load and parse a large xml file every time a page loads, so I think I'll go with what Eeems suggested instead. I can keep the many .txt files in another directory to avoid clutter...
Title: Re: Making a webcomic: "dynamic hyperlinks"
Post by: Juju on September 22, 2011, 02:14:21 am
Why not using MySQL?
Title: Re: Making a webcomic: "dynamic hyperlinks"
Post by: leafy on September 22, 2011, 02:44:48 am
I used to use walrus, (http://walrus.newbsoft.com/), then completely change the layout to whatever else.
Title: Re: Making a webcomic: "dynamic hyperlinks"
Post by: Eeems on September 22, 2011, 03:16:10 am
Why not using MySQL?
Lets start him off slow ok :P Adding MySQL to the mix when he barely knows PHP isn't a good idea yet.
Title: Re: Making a webcomic: "dynamic hyperlinks"
Post by: cooliojazz on September 22, 2011, 01:24:07 pm
I like x10, ive been using them for a good few years.  or just beg juju.  thats normally pretty good too :P If you want, i can show you a stripped down version of Frameless Comic to show you an example of how to store everything in a mysql db and some other features =)

EDIT:  Ssomehow i guess i didnt refresh the page.  somehow.  There needs to be a notifier for that too :P Also Eeems, idk, I learned php and mysql at the same time, it wasnt bad, only downsied is that i basically think of mysql as an extensioin of php, not its own thing XD
Title: Re: Making a webcomic: "dynamic hyperlinks"
Post by: squidgetx on September 22, 2011, 08:24:45 pm
I'd like to learn the best and most efficient way to do things haha. I don't mind adding in MySQL, I think I've got a handle on PHP.

I tried looking up MySQL and I got a lot of info on how to create and manipulate data tables; but I'm really looking for just a way to access a data table? How can you do that?
Title: Re: Making a webcomic: "dynamic hyperlinks"
Post by: Eeems on September 22, 2011, 09:20:33 pm
http://www.w3schools.com/php/php_mysql_intro.asp
That's where I went to learn the initial stuff. I then just googled to find answers to whatever I needed.

This is what you probably want specifically though: http://www.w3schools.com/php/php_mysql_select.asp
Title: Re: Making a webcomic: "dynamic hyperlinks"
Post by: squidgetx on September 22, 2011, 10:13:18 pm
I ended up using w3 to figure it out before I saw your post O_o thanks though ahaha.

Anyway, looks like I've got everything done :D Titles, alts, and tags all get fetched out of a mySQL using $cur, there's also a $max which helps the navigation buttons work perfectly. Thanks guys!

Now to wrap up the layout and CSS...
Title: Re: Making a webcomic: "dynamic hyperlinks"
Post by: Jim Bauwens on September 23, 2011, 03:24:36 am
Just a note, be sure to filter $cur, so that SQL and code injections aren't possible ;)
Since $cur should be a number, using intval() on it should be fine :)
Title: Re: Making a webcomic: "dynamic hyperlinks"
Post by: squidgetx on September 24, 2011, 03:30:26 pm
We're live :D (http://www.shakespearescomics.tk)

Now I'm wondering if it's a good idea to change to individual pages (no php/mysql) to deal with navigation, just for cleanliness and search visibility :* Since adding a new comic entails going to the file manager to upload a new file and change the value of $max AND then going into mySQL to enter the title/alt text I feel like it's pretty much the same amount of work either way...

Oh, and is there a way to strip the .html off the end of the url of an hmtl file (in the address bar)
Title: Re: Making a webcomic: "dynamic hyperlinks"
Post by: sqrt(Time) on September 24, 2011, 08:44:34 pm
As for the difficulty of adding a new comic - you could create a PHP page, sort of as an admin interface, to let you upload the file, and then automatically increment $max and store the title/alt text for you. Password protected, of course.
It might not work too well, if your web host doesn't let you do file uploads like that through some sort of stupid/weird restrictions.
Another way to make it somewhat simpler, perhaps, is to have a .txt file with all the titles and alt text (or a large number, 1 per comic), which the PHP script looks through. Also, just by checking if a file/line is present, it could then remove the need for $max.

You can do some fancy URL replacement stuff in what for you will probably be a .htaccess file. Googling for "RewriteRule" or "mod_rewrite" should tell you how; you can do stuff like making the comic URLs be http://www.shakespearescomics.tk/8, or http://www.shakespearescomics.tk/comic/8, or http://www.shakespearescomics.tk/hr7389i/uqhr8yug/lolol if you feel like it.
Title: Re: Making a webcomic: "dynamic hyperlinks"
Post by: squidgetx on September 24, 2011, 10:13:48 pm
I googled and I became hopelessly confused...Does anyone have a table or something for the syntax and special char parameters for RewriteRule?

Edit: I added this line to .htaccess
Code: [Select]
RewriteRule ^([^/]*)$ /index.php?p=$1 [L] and it just killed my CSS...aka the page loads with no styling O_o.
Title: Re: Making a webcomic: "dynamic hyperlinks"
Post by: Eeems on September 24, 2011, 11:19:25 pm
You could have the script dynamically parse what $max should be, and you could create a form for yourself to upload the file as well as update the title/text ( just make sure to make it secure ).
There should be, at the least, you could just do a substr() but I'm pretty sure there are more advanced methods.
I'd say stick with the dynamic design and just try to make it more streamlined.
Title: Re: Making a webcomic: "dynamic hyperlinks"
Post by: sqrt(Time) on September 25, 2011, 09:26:57 pm
Squidgetx, the reason that breaks your CSS is because that regex is too general... when the browser sends a request for http://www.shakespearescomics.tk/comic.css, Apache will look for http://www.shakespearescomics.tk/index.php?p=comic.css instead.
You could try
Code: [Select]
RewriteRule ^([0-9]*)$ /index.php?p=$1 [L] instead, this will only match numeric inputs.
Title: Re: Making a webcomic: "dynamic hyperlinks"
Post by: squidgetx on September 26, 2011, 12:19:10 pm
Thanks, that worked :D