Web Programming

Message

technosaurus · #46 Post by **technosaurus** » Sat 19 Oct 2013, 23:47

more drag and drop:

<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>

matiasbatero · #47 Post by **matiasbatero** » Fri 25 Oct 2013, 03:34

technosaurus wrote:Here is a script that will generate an html index of directories and files.
Code: Select all
#!/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>index of $1directories:<ul><li><a href="../">[parent directory]</a></li>$D</ul>files:<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

technosaurus · #48 Post by **technosaurus** » Thu 14 Nov 2013, 14:50

This version drags the entire object during the drag.

Code: Select all

<!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>

technosaurus · #49 Post by **technosaurus** » Tue 17 Dec 2013, 06:44

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: Select all

#!/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.

edoc · #50 Post by **edoc** » Tue 17 Dec 2013, 16:14

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.

technosaurus · #51 Post by **technosaurus** » Tue 17 Dec 2013, 17:24

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.

seaside · #52 Post by **seaside** » Wed 18 Dec 2013, 19:49

technosaurus,

Just tried this out in puppy.
-Setup-

Code: Select all

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"

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)

technosaurus · #53 Post by **technosaurus** » Thu 19 Dec 2013, 01:55

That new line before the quote is necessary for formatting.

Here is an new version with loadable archives:

Code: Select all

#!/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>"

seaside · #54 Post by **seaside** » Thu 19 Dec 2013, 14:34

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

)

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

Regards,
s

seaside · #55 Post by **seaside** » Fri 20 Dec 2013, 01:24

technosaurus,

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

Thanks,
s
(This is sooo unlike usual form html - )

technosaurus · #56 Post by **technosaurus** » Fri 20 Dec 2013, 04:33

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: Select all

#!/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)

seaside · #57 Post by **seaside** » Fri 20 Dec 2013, 17:08

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)

technosaurus · #58 Post by **technosaurus** » Thu 02 Jan 2014, 03:32

Matt Kruse has some nice little snippets that I may eventually incorporate.

Ted Dog · #59 Post by **Ted Dog** » Thu 02 Jan 2014, 22:02

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.

technosaurus · #60 Post by **technosaurus** » Thu 02 Jan 2014, 23:45

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).

Ted Dog · #61 Post by **Ted Dog** » Sat 04 Jan 2014, 14:02

marketing departments minor tax and shipping changes caused a total rewrite of business logic and shopping cart module..

That they just appended it to an otherwise tiny by programing standards combo ( ALREADY HAD COMBO LOGIC ) combos are just another item code and picture of three items and new price.

technosaurus · #62 Post by **technosaurus** » Tue 21 Jan 2014, 02:12

I found free versions of windows images from microsoft for testing with IE
http://www.microsoft.com/en-us/download ... x?id=11575

but the images are self extracting .exe so still need windows to create the image.
and probably this helper:
https://raw.github.com/xdissent/ievms/master/ievms.sh

seaside · #63 Post by **seaside** » Mon 10 Feb 2014, 00:48

When technosaurus posted his nifty note-taking html server/client app, I found myself using it quite a bit. Recently it occurred to me that this idea could be expanded to include databases.....

A database seems somewhat complicated - decide on a schema, enter the structure, make up a form for data entry, set up a query operation.

Why not just make up an html form which actually creates and could also query a database?

So here is a simple prototype called "form_db".

Decide on your fields, grab some form html coding (lots of easy on-line form builders and templates available) and just paste the code into Form_db. Now you can just fill in the form and a json database is created and additional entries can be made. To query the database you could have several predefined buttons (each with a "case" statement) to return information based on fields. You could even make a text area to accept a complex query with JQ.

At first I thought I'd have to use Python or maybe Javascript to parse url and read/write json files. But then again, maybe all that could be done in bash and it turns out that it could (although probably lots easier in Python). Now that a Json database has been created, how might it be queried and used in this environment? I then discovered JQ, described as an awk/sed for json here-
http://stedolan.github.io/jq/

Next, how to show the json query return in the open html page?

Handily, there is a javascript widget to display json data. Good, everything we need.

Here's a simple contact form example with a single query button that returns all the contact names.

JQ has extensive ways to return information, including math expressions.

You'll find two scripts which go in $HOME/cgi-bin:
query_string # parses the url and directs action
form_db.cgi # browser form

Also attached is jq below which I compiled in Puppy Precise 5.4.3 and stripped - weighs in at only 247k

To set this up, do the following in a terminal:

Code: Select all

mkdir $HOME/cgi-bin
cd $HOME
httpd

Install "jq.tar.gz" to /

Place the scripts "query_string" and "form_db.cgi" in $HOME/cgi-bin and make executable.

Then point your browser at url "localhost/cgi-bin/form_db.cgi"

Here's a pic (of course, you could add css styling to make this as decorative as you'd like)

Cheers,
s

Code: Select all

#!/bin/sh
# place script in $HOME/cgi-bin/form_db.cgi
# called by browser "localhost/cgi-bin/form_db.cgi"
# seaside 2/9/2014
# form html code follows:

echo '
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<h2> Contacts </h2>
<form id="contacts-form" action="/cgi-bin/form_db.cgi">
<body bgcolor="#E6E6FA">
<label>First name:</label>
<div class="field"><input type="text" name="first_name" autofocus /></div>
<label>Last name:</label>
<div class="field"><input type="text" name="last_name" /></div>
<label>Email:</label>
<div class="field"><input type="text" name="email" /></div>
</div>
<input type="radio" name="gender" value="Male" checked> Male
<input type="radio" name="gender" value="Female"> Female
<div class="item button button-default"><br>
<div class="field"><input type="submit" id="contacts-op-save" value="Save" /></div>
<input type="submit" name="id_entry" value="Query All" />
</div>
</div>
</form>'

if [ "${QUERY_STRING/id_entry=Query}" = "${QUERY_STRING}" ] ; then
	./query_string   #  submit item
else    # it's a query

input=`cat /root/cgi-bin/contact.json | jq -c '.'`
echo '<!DOCTYPE html>
<script src="http://metawidget.org/js/3.4/metawidget-core.min.js"></script>
<script type="text/javascript">
var body = '$input'
</script>
<div id="metawidget"></div>
<script type="text/javascript">
var mw = new metawidget.Metawidget( document.getElementById( "'metawidget'" ));
mw.toInspect = body;
mw.buildWidgets();
</script>
</html>' 

fi

Code: Select all

#!/bin/sh
# place script in $HOME/cgi-bin/query_string
# parses QUERY_STRING from form_db.cgi
# seaside 2/9/2014

[ -z "$QUERY_STRING" ] && exit

QUERY_STRING=$(echo -e $(sed -e 's/%/\\x/g' -e 's/+/ /g' <<<"$QUERY_STRING"))

if [ ! -f $HOME/cgi-bin/contact.json ]; then
	oldIFS=$IFS
	IFS="&"
	jstring='[{'
	for item in $QUERY_STRING; do
	key='"'${item%=*}'"'
	value='"'${item#*=}'"'
	jstring="$jstring $key:$value,";
	done
	IFS=$oldIFS
	
	jstring="${jstring%,}}]"  # cut comma, add }]
	echo "$jstring" >$HOME/cgi-bin/contact.json 

else    # additional object

	json=`cat $HOME/cgi-bin/contact.json`
	json="${json%]},"    # cut ] add comma
	oldIFS=$IFS
	IFS="&"
	json_add='{'
	for item in $QUERY_STRING; do
	key='"'${item%=*}'"'
	value='"'${item#*=}'"'
	json_add="$json_add $key:$value,";
	done
	IFS=$oldIFS
	
	json_add="${json_add%,}}]"
	
	echo "$json$json_add" >$HOME/cgi-bin/contact.json


fi

technosaurus · #64 Post by **technosaurus** » Thu 10 Jul 2014, 03:56

I was thinking about how so many webpages have virtually 90% of the same content on every page and 10% is the actual content that changes... unfortunately bots don't evaluate javascript, so you have to use cached pages for the bots... here is a simple example

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head><meta name="fragment" content="!">
<title>bottester</title></head>
<body>menus and stuff here - no content<div id="content"><div></body><script>
var h=XMLHttpRequest();
u=window.location.toString().replace("#!","?_escaped_fragment_=")
try{ h['open']('GET',u,false);
	h['send']();
	if(h['status']!=404) document.getElementById("content")['innerHTML']=h['responseText'];
}catch(e){ alert("exception");}
</script></html>

and an example server using netcat (specifically busybox's nc)
##do not use this _as-is_, It is really unsafe #!../../etc/passwd

Code: Select all

#!/bin/sh
nc -ll -p 80 -e sh -c '
while read A B DUMMY; do
	case "$A" in
	[Gg][Ee][Tt])
		case "$B" in
			*"?_escaped_fragment_="*)FILENAME=${B#*?_escaped_fragment_=};;
			*)FILENAME=index.html;;
		esac
		echo -e "HTTP/1.1 200 OK\r\nContent-Length: `stat -c %s ${FILENAME}`\r\n\r\n"
		cat ${FILENAME}
		break;;
	esac
done'

... so the contents will be loaded based on the #!filename.html
(it's contents will go int <div id="content">) because both the bot and our javascript access the content via the ?_escaped_fragment_= version and the #! simply tries to go to a marked spot on the page (which doesn't exist)

... next up navigation by our #!content links with an event handler

technosaurus · #65 Post by **technosaurus** » Sun 20 Jul 2014, 10:32

working on bottom menus:

Code: Select all

<style>
#menu{position:fixed;bottom:0;float:left;text-align:center;white-space:nowrap}
#menu *{color:#000;list-style-type:none;margin:0;padding:0}
#menu a{display:block;text-decoration:none;position:relative;transition:background-color .5s}
#menu li{background:#9a7;float:left;position:relative}
#menu ul li{font-weight:700;width:140px}
#menu>ul li a{padding-bottom:3px;width:140px}
#menu>ul>li>ul{bottom:0;z-index:1;transition:bottom .2s}
#menu ul li ul li{padding:3px;z-index:2}
#menu ul li ul li a:hover{border-left:solid 1px #000;background-color:rgba(222,222,222,.5)}
#menu ul li ul,#menu:hover ul li ul,#menu:hover ul li:hover ul li ul{position:absolute;visibility:hidden;width:140px}
#menu:hover ul,#menu:hover ul li:hover ul,#menu:hover ul li:hover ul li:hover ul{visibility:visible}
#menu:hover ul li:hover ul li:hover ul{margin-left:140px;margin-top:-48px;position:absolute}
#menu:hover ul li:hover ul{position:absolute}
#menu>ul>li:hover>ul{bottom:100%}
</style>
<div id="menu">
	<ul>
		<li>
			<a href="http://technosaurus.github.io">Menu</a>
			<ul>
				<li>
					<a href="#">Projects</a>
					<ul>
						<li><a href="#">Amaya gtk1</a></li>
						<li><a href="#" title="Shell scripts designed to show off jwm and make configuration easy.">Jwm Tools</a></li>
						<li><a href="#" title="A small replacement C library for building minimized static apps.">Libc embedded</a></li>
						<li><a href="#" title="A javascript library designed to be minimized by Google's Closure Compiler." >Liba.js</a></li>
						<li><a href="#" title="A tiny public domain ogg player.">PDVorbis</a></li>
						<li><a href="#">Pupngo</a></li>
						<li><a href="#">Simple Icon Tray</a></li>
						<li><a href="#">Web Desktop</a></li>
					</ul>
				</li>
				<li><a href="#">License</a></li>
				<li><a href="#">FAQ</a> </li>
				<li><a href="#">Disclaimer</a></li>
				<li><a href="#">About Me</a></li>
			</ul>
		</li>
		<li>
			<a href="#">Resources</a>
			<ul>
				<li><a href="#">Helpful Links</a></li>
				<li>
					<a href="#">Affiliates &rsaquo;</a>
					<ul>
						<li><a href="#">X</a></li>
						<li><a href="#">X</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li>
			<a href="#">News & Events</a>
			<ul>
				<li><a href="#">Press Articles</a></li>
				<li><a href="#">Newsletter</a></li>
				<li><a href="#">Events</a></li>
				<li><a href="#">Blog</a></li>
			</ul>
		</li>
		<li>
			<a href="#">Espanol</a>
			<ul>
				<li><a href="#">X</a></li>
			</ul>
		</li>
	</ul>
</div>

(old)Puppy Linux Discussion Forum

(old)Puppy Linux Discussion Forum

Web Programming

Poor man's blog

poor man's blog

Form_db