Puppy Linux Discussion Forum Forum Index Puppy Linux Discussion Forum
Puppy HOME page : puppylinux.com
"THE" alternative forum : puppylinux.info
 
 FAQFAQ   SearchSearch   MemberlistMemberlist   UsergroupsUsergroups   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 

The time now is Thu 24 Jul 2014, 16:08
All times are UTC - 4
 Forum index » Off-Topic Area » Programming
Web Programming
Post_new_topic   Reply_to_topic View_previous_topic :: View_next_topic
Page 4 of 5 Posts_count   Goto page: Previous 1, 2, 3, 4, 5 Next
Author Message
technosaurus


Joined: 18 May 2008
Posts: 4277

PostPosted: Sat 19 Oct 2013, 19:47    Post_subject:  

more drag and drop:
Code:
<html>
<head>
<style>
#bg {position:absolute;width:100%;height:100%;background-color:gray}
.drag {position:absolute;left:100px;top:150px;background-color:red}
</style>
<script>
var dragObj={};
function drag(n,ev){
   dragObj.n=n;
   dragObj.x=ev.pageX;
   dragObj.y=ev.pageY;
}
function drop(n,ev){
   var ob=dragObj,
   x=parseInt(getComputedStyle(ob.n,null).getPropertyValue("left"),10),
   y=parseInt(getComputedStyle(ob.n,null).getPropertyValue("top"),10);
   ob.n.style.top=y+ev.pageY-ob.y+"px";
   ob.n.style.left=x+ev.pageX-ob.x+"px";
   return !1;
}
</script>
<title></title>
</head>
<body>
<div id="bg" ondragover="return !!0" ondrop="drop(this,event);return !!0;" />
<div class="drag" ondragstart="drag(this,event)">hello</div>
</body>

</html>

_________________
Web Programming - Pet Packaging 100 & 101
Back to top
View user's profile Send_private_message 
matiasbatero


Joined: 11 Oct 2012
Posts: 53
Location: Mar del Plata, Argentina

PostPosted: Thu 24 Oct 2013, 23:34    Post_subject:  

technosaurus wrote:
Here is a script that will generate an html index of directories and files.
Code:
#!/bin/sh
# $1 is a directory to index as html
cd $1;
for x in *; do [ -d "$x" ] && D=$D"<li><a href=\"$x/\">$x/</a></li>" || F=$F"<li><a href=\"$x\">$x</a></li>"; done
echo "<html><head><title>index of $1</title></head><body><p><b>index of $1</b></p><p>directories:</p><ul><li><a href=\"../\">[parent directory]</a></li>$D</ul><p>files:</p><ul>$F</ul></body></html>" >$1/index.html

there is a C version of this script here:
http://www.mathopd.org/dist/dir_cgi.c.txt


hahaha... powerfull compactation. C analogous is hell in comparison..
Bash rules
Back to top
View user's profile Send_private_message 
technosaurus


Joined: 18 May 2008
Posts: 4277

PostPosted: Thu 14 Nov 2013, 10:50    Post_subject:  

This version drags the entire object during the drag.

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<style>
#bg {position:absolute;width:100%;height:100%;background-color:gray}
.drag {position:absolute;left:100px;top:150px;text-align:center;}
</style>
<script>
var dragObj={}, dragIcon = document.createElement('img');

function drag(n,ev){
   dragObj.n=n;
   dragObj.x=ev.pageX-parseInt(getComputedStyle(dragObj.n,null).getPropertyValue("left"),10);
   dragObj.y=ev.pageY-parseInt(getComputedStyle(dragObj.n,null).getPropertyValue("top"),10);
   return !1;
}
function dragging(ev){
   dragObj.n.style.left=ev.pageX-dragObj.x+"px";
   dragObj.n.style.top=ev.pageY-dragObj.y+"px";
   return !1;
}
function drop(ev){
   return !1;
}
</script>
<title></title>
</head>
<body>
<div id="bg" onselectstart="return !!0" ondragover="return dragging(event)" ondrop="return drop(event)" />
<div class="drag" draggable="true" ondragstart="drag(this,event)">
<img src="osmo.png" alt="Smiley face" /><br>
hello world
</div>
</body>

_________________
Web Programming - Pet Packaging 100 & 101
Back to top
View user's profile Send_private_message 
technosaurus


Joined: 18 May 2008
Posts: 4277

PostPosted: Tue 17 Dec 2013, 02:44    Post_subject:  

here is a shell only note taker (aka poor mans blog) designed to run on local network only (no advanced security precautions implemented) ... it runs in cgi-bin/a.cgi ( ... not a very clever name)

Code:
#!/bin/sh
tstamp=`date +%Y%m%d%H%M%S`
[ "$QUERY_STRING" ] && /usr/sbin/httpd -d "${QUERY_STRING#*=}
" > $tstamp.note
[ "$QUERY_STRING" == "a=new" ] && tar -czf $tstamp.tar.gz *.note && rm *.note
echo "
<html><head><head><body>Enter something here:
<form action='/cgi-bin/a.cgi'><input name='a' autofocus /></form>
<hr /><pre>"
ls -r1 *.note | xargs cat
echo "</pre><body></html>"

Just enter any text or html into the input box and it appears at the top of the list. When you want a new list just type new in the box and it will archive your current notes and start again.

_________________
Web Programming - Pet Packaging 100 & 101
Back to top
View user's profile Send_private_message 
edoc


Joined: 07 Aug 2005
Posts: 4337
Location: Southeast Georgia, USA

PostPosted: Tue 17 Dec 2013, 12:14    Post_subject:  

I will have to read through this thread many times to follow what you are doing - I'm just too long out of coding (and never that good to begin with) to get it the first time.

I'm challenging our 1st year IT major son to study this and to explain it to his old daddy.

He's supposed to be updating my pre-HTML 4 Web sites so maybe he can take advantage of some of this during that process.

I really appreciate you sharing this as both a learning experience and as valuable tools.

_________________
Thanks! David
Home page: http://nevils-station.com
Don't google Search! http://duckduckgo.com
Puppy upup Raring 3992 & Lighthouse64-b602
Back to top
View user's profile Send_private_message Visit_website 
technosaurus


Joined: 18 May 2008
Posts: 4277

PostPosted: Tue 17 Dec 2013, 13:24    Post_subject:  

edoc wrote:
I will have to read through this thread many times to follow what you are doing
Please don't read too much into it. Many of my posts are a "hey, look what I figured out" notes so I don't forget rather than full on tutorials. That being said a lot more is covered than you will encounter in a run of the mill graduate level web programming course. Most courses will be either client side or server side and cover one aspect (html+css, javascript or server side applications), but not the full integration. Hell my school was still teaching Java + SOAP and I had to get permission from my instructor to replace the SOAP xml request with shell cgi and JSONP (thus the very rudimentary SOAP functions) My classmates had hundreds of lines of code and required a full java environment to run while mine fit on a single page and only needed busybox and sqlite (though it could just as easily used flat files as in my previous note taking example)

I have one other integrated (server and browser client) example that has not been posted because it is alpha quality and requires sqlite... an almost working (but not well tested) rental store app. If anyone is interested in those, I'll try to dig them up.

If anyone has a question about my terse code, please ask. If I(we) can't answer it, I'll put it on stackoverflow.

_________________
Web Programming - Pet Packaging 100 & 101
Back to top
View user's profile Send_private_message 
seaside

Joined: 11 Apr 2007
Posts: 886

PostPosted: Wed 18 Dec 2013, 15:49    Post_subject: Poor man's blog  

technosaurus,

Just tried this out in puppy.
-Setup-

Code:
cd /$HOME
mkdir cgi-bin
#place "a.cgi" in $HOME/cgi-bin, make executable
httpd  # start busybox server


In browser put url line "http://localhost/cgi-bin/a.cgi"

Quote:

I have one other integrated (server and browser client) example that has not been posted because it is alpha quality and requires sqlite... an almost working (but not well tested) rental store app. If anyone is interested in those, I'll try to dig them up


Yes, that would be quite welcome.

Thanks for posting this clever note taker example.

Regards,
s
(I think "a.cgi" keeps nicely with the "minimalistic" theme) Very Happy

Edited_time_total
Back to top
View user's profile Send_private_message 
technosaurus


Joined: 18 May 2008
Posts: 4277

PostPosted: Wed 18 Dec 2013, 21:55    Post_subject:  

That new line before the quote is necessary for formatting.

Here is an new version with loadable archives:
Code:
#!/bin/sh
TS=`date +%Y%m%d%H%M%S`
echo "
<html><head><head><body><table><tr><td>Notes:</td><td><form action='/cgi-bin/a.cgi'>
<input name='a' size='80' autofocus title='new   : archive notes and start over,
clear : remove current notes,
list  : show a list of archived notes'/></form></td></tr></table><hr /><pre>"
case "$QUERY_STRING" in
   "a=new")cat *.note|gzip -9 > $TS.notes.gz && rm *.note;;
   "a=clear")rm *.note;;
   "a=list")for x in *.notes.gz;do echo "<a href=/cgi-bin/a.cgi?a=load$x>$x</a>";done;;
   "a=load"*)gunzip -c "${QUERY_STRING#*=load}"|tac > $TS.note;;
   "a="*)/usr/sbin/httpd -d "${QUERY_STRING#*=}
"   > $TS.note;;
esac
ls -r1 *.note | xargs cat && echo "</pre><body></html>"

_________________
Web Programming - Pet Packaging 100 & 101
Back to top
View user's profile Send_private_message 
seaside

Joined: 11 Apr 2007
Posts: 886

PostPosted: Thu 19 Dec 2013, 10:34    Post_subject:  

technosaurus wrote:
That new line before the quote is necessary for formatting.

technosaurus,

Yes (I did think all notes in one line was a bit odd Very Happy )

Thanks for the new, expanded version. I'll have to check it out later.

Regards,
s
Back to top
View user's profile Send_private_message 
seaside

Joined: 11 Apr 2007
Posts: 886

PostPosted: Thu 19 Dec 2013, 21:24    Post_subject:  

technosaurus,

The new version with loadable archives is quite slick...

Thanks,
s
(This is sooo unlike usual form html - ) Very Happy
Back to top
View user's profile Send_private_message 
technosaurus


Joined: 18 May 2008
Posts: 4277

PostPosted: Fri 20 Dec 2013, 00:33    Post_subject:  

I set that up to be keyboard friendly, but if you want mouse click to submit with a full textarea, here is an alternative:
Code:
#!/bin/sh
TS=`date +%Y%m%d%H%M%S`
echo "
<html><head><style>table{width:100%;border-width:0 0 1 0;border-bottom:thick solid #ff0000} textarea{width:100%}</style><head>
<body><form action='/cgi-bin/a.cgi'><table><tr><td width='70px'><input type='submit' value='Save
Note' /></td><td width='100%'><textarea name='a' rows='10' width='100%' autofocus
title='new   : archive notes and start over,
clear : remove current notes,
list  : show a list of archived notes' ></textarea></td></tr></table></form><pre>"
case "$QUERY_STRING" in
   "a=new")ls -r1 *.note | xargs cat|gzip -9 > $TS.notes.gz && rm *.note;;
   "a=clear")rm *.note;;
   "a=list")for x in *.notes.gz;do echo "<a href=/cgi-bin/a.cgi?a=load$x>$x</a>";done;;
   "a=load"*)gunzip -c "${QUERY_STRING#*=load}" > $TS.note;;
   "a="*)/usr/sbin/httpd -d "${QUERY_STRING#*=}<hr>"   > $TS.note;;
esac
ls -r1 *.note | xargs cat && echo "</pre><body></html>"
This is an example of a "flat file database".
You can see that this could be extended to store additional data in subdirectories or with different file extensions, such that your "SELECT" statements are simple filesystem operations (I had some code for a genericized flat file db at one point ... I should dig it up)

_________________
Web Programming - Pet Packaging 100 & 101
Back to top
View user's profile Send_private_message 
seaside

Joined: 11 Apr 2007
Posts: 886

PostPosted: Fri 20 Dec 2013, 13:08    Post_subject: poor man's blog  

technosaurus,

This is a nice and spunky interface.
I especially like the red seperator and underline of each note.

Thanks and Regards,
s
(I actually feel like writing a note when presented with such terse simplicity) Very Happy
Back to top
View user's profile Send_private_message 
technosaurus


Joined: 18 May 2008
Posts: 4277

PostPosted: Wed 01 Jan 2014, 23:32    Post_subject:  

Matt Kruse has some nice little snippets that I may eventually incorporate.
_________________
Web Programming - Pet Packaging 100 & 101
Back to top
View user's profile Send_private_message 
Ted Dog


Joined: 13 Sep 2005
Posts: 2292
Location: Heart of Texas

PostPosted: Thu 02 Jan 2014, 18:02    Post_subject:  

technosaurus wrote:
edoc wrote:
I will have to read through this thread many times to follow what you are doing
Please don't read too much into it. Many of my posts are a "hey, look what I figured out" notes so I don't forget rather than full on tutorials. That being said a lot more is covered than you will encounter in a run of the mill graduate level web programming course. Most courses will be either client side or server side and cover one aspect (html+css, javascript or server side applications), but not the full integration. Hell my school was still teaching Java + SOAP and I had to get permission from my instructor to replace the SOAP xml request with shell cgi and JSONP (thus the very rudimentary SOAP functions) My classmates had hundreds of lines of code and required a full java environment to run while mine fit on a single page and only needed busybox and sqlite (though it could just as easily used flat files as in my previous note taking example)

I have one other integrated (server and browser client) example that has not been posted because it is alpha quality and requires sqlite... an almost working (but not well tested) rental store app. If anyone is interested in those, I'll try to dig them up.

If anyone has a question about my terse code, please ask. If I(we) can't answer it, I'll put it on stackoverflow.


lol reminds me of taking over my companies website maintaining after highly paid contractors took a year. I was so confused on the minor changes to tax calcs and shipping rules that the marketing department added to a SIMPLE combo special addition. In order to have the requirements better explained I screen scraped site and made a simple flat file of all products around 7000 items. And wrote both methods of calcs and combo offers, while at home sick (could not access code base on machine remotely ) it was a dead ringer for the company site but ran on a laptop with sub second performance.
I gave the marketing web manger a copy of throw together site and He quickly reused methods to help communicate desires. Win Win for both of us. You can do just about everything with flat file databases even when its just a string lookup and a pipe delimited line of txt.
Back to top
View user's profile Send_private_message 
technosaurus


Joined: 18 May 2008
Posts: 4277

PostPosted: Thu 02 Jan 2014, 19:45    Post_subject:  

Ted Dog wrote:
In order to have the requirements better explained I screen scraped site and made a simple flat file of all products around 7000 items. And wrote both methods of calcs and combo offers, while at home sick (could not access code base on machine remotely ) it was a dead ringer for the company site but ran on a laptop with sub second performance.

I wrote a little bit about flat file db in the death to spreadsheets thread but for web programming, JSON would be just as easy these days with libsee-shell, spidermonkey or v8/nodejs. I don't think anyone is useing libsee or the older, smaller C version of spidermonkey for this, but they are both under half a MB if built statically against musl-libc, so they could be used in embedded systems like routers and set top boxes (libsee is MIT licensed BTW, so its a good choice for commercial products).

_________________
Web Programming - Pet Packaging 100 & 101
Back to top
View user's profile Send_private_message 
Display_posts:   Sort by:   
Page 4 of 5 Posts_count   Goto page: Previous 1, 2, 3, 4, 5 Next
Post_new_topic   Reply_to_topic View_previous_topic :: View_next_topic
 Forum index » Off-Topic Area » Programming
Jump to:  

Rules_post_cannot
Rules_reply_cannot
Rules_edit_cannot
Rules_delete_cannot
Rules_vote_cannot
You cannot attach files in this forum
You can download files in this forum


Powered by phpBB © 2001, 2005 phpBB Group
[ Time: 0.1078s ][ Queries: 13 (0.0054s) ][ GZIP on ]