Course Address : Bioinformatics, Shandong University

Article directory

Eight, programming basics and web page production

Eight, programming basics and web page production

8.1 Linux operating system

Linux operating system : open source, free, open architecture, powerful, low-cost configuration (low hardware requirements)
Current version: redhat , suse , redflag-linux , ubuntu , etc. It is recommended to choose one and understand it thoroughly (the teacher uses redhat)
See the video for details: Linux Operating System P134
Linux interface : graphical interface, command line interface.
Windows remote connection to Linux :
◆ PuTTY : command line operation

◆ WinSCP : window operation - file transfer.

8.2 Basic Linux commands

See the video for details: Linux Basic Commands-01 P135

ls command

ls command = dir command in Dos
lsList all content in the current folder
ls ProgramsList everything in the Programs folder
ls lsList details of all contents in the current folder

insert image description here

man command

manThe command is a help command under Linux . Through man, you can view information such as command help, configuration file help and programming help in Linux.
man lsView the help file of the ls command . "LS(1)" is displayed in
the upper left corner , "LS" indicates the name of the manual, and "1" indicates that the manual is in the first chapter. PgDn pages down, PgUp pages up. q or quit to exit.

insert image description here

date command

dateThe command is to display or set the system time and date.
dateDisplay the current date and time in the default format
date +%Y/%m/%dDisplay "Year/Month/Day" according to the specified format
date +%H:%MDisplay "Hour:Minute" in the specified format

insert image description here

cal command

calDisplay a calendar for the current month
cal 10 2016Display a calendar for the specified month: cal month year

insert image description here

bc command

The bc command is a calculator language that supports arbitrary precision interactive execution.
+add, -subtract, *multiply, /divide, ^exponent, % remainder
bcEnter the calculator and display the calculation version information
1+2*3Enter the formula, press Enter, and perform calculations
scale=3Set the number of decimal places by scale=number
quitEnter quit to exit the bc calculator

insert image description here

important hotkey

TabThe key is automatically completed . The [Tab] key has the functions of "command completion" and "file completion".
When you can't remember the complete file name or command name, enter the first few letters and press the [Tab] key, it will automatically complete it for you or give you enough hints. By making good use of the [Tab] key, you can avoid many typing errors.
ls .bashAfter entering ls .bash and pressing the [Tab] key twice , all files beginning with .bash will be displayed.
Ctrl + C Terminate the operation .
If you enter a wrong command or parameter under Linux, sometimes this command or program will run continuously. At this time, press [CtrI]-c to make the current command or program "stop".

directory and path

See the video for details: Linux Basic Commands-02 P136
Symbols are used to represent special directories
. The directory of this layer (the current directory)
..is the directory of the previous layer The main folder where the
-previous working directory "current user" is located Root directory
~
/
Several commands for manipulating directories
pwd Display the current directory
cdChange directory
mkdirCreate a new directory
rmdirDelete an empty directory

insert image description here

cpCopy command
The cp command is used to copy one or more source files or directories to a specified destination file or directory.
cp test.txt test/test2Copy the test.txt file to the test2 folder in the test folder in the current directory, keeping the name unchanged.
cp -r /test test3Copy all the files and subdirectories under the test folder to the current directory, and rename it to the test3 folder.
rmDelete command
The rm command can delete one or more files or directories in a directory, and can also delete a directory and all files and subdirectories under it.
rm -i test.txtDelete the test.txt file. Ask the user before deleting, input y to confirm deletion, and input n if not to delete.
rmdir testTrying to delete the test folder with the delete directory command rmdir returns an error message and cannot be deleted!
rm -r testTo delete a non-empty directory , the rm command and the parameter -r are required.

mv move/rename command

The mv command is used to rename a file or directory, or move a file from one directory to another.
Note: The results of mv and cp are different, mv seems to "move" the files, and the number of files has not increased. And cp copies files, and the number of files increases.
Move : mv test.txt testMove the test.txt file into the test folder. If the destination is a directory , the source files will be moved there without changing the filename.
Rename : mv test.txt test1.txtRename the test.txt file to test1.txt. If the target is a file and not a directory, the source file name will be changed to the target file name, and an existing file with the same name will be overwritten .

Text file lookup command

cat = first line to last line
cat test.pdbContinuously scroll the first line to the last line of the file on the screen.
Ctrl+Skey: stop scrolling; Ctrl+Qkey: resume scrolling; Ctrl+Ckey: terminate command. The parameter " -n" prints the line number.
tac = last line to first line
tac test.pdbContrary to "cat", scroll the last line to the first line of the file continuously on the screen.
more = Browse forward/backward by page Display text one screen
more test.pdb at a time , stop when full screen. Key: display the content of the next screen ; key: display the content of the next line ; key: display the content of the previous screen ; key: exit.
SpaceEnterBQ
less = browse forward/backward by page
less test.pdbVery similar to the more command. PgDn key: display the content of the next screen; PgUp key: display the content of the previous screen; Q key: exit.
head = show the first few lines (10)
head test.pdb -n 6show the content of the first 6 lines of the file.
By default, the head command displays the first 10 lines of the file. Add parameter "-n number" to display the first number line.
tail = show the last few lines (10)
tail test.pdb -n 6Display the contents of the last 6 lines of the file.
By default, the tail command displays the last 10 lines of the file. Add the parameter "-n number" to display the last number line.

Create/modify text

vi Full-screen plain text editor
vi editor supports editing mode and command mode. In editing mode, text editing functions can be completed, and in command mode, file operation commands can be completed.
Commonly used built-in commands :
switch from edit mode to command mode : Esc
switch from command mode to edit mode :
and add text after the current character: and add text a
at the end of the line: A
and insert text before the current character: i
and insert text at the beginning of the line: I
:Wqat In command mode, execute save and exit operation
:WIn command mode, execute save operation In command
:w!mode, execute forced save operation In
:qcommand mode, execute exit vi operation
vi mytest.txtCreate a new plain text file, and open the editor through the vi command to edit the content of the file.
aBy default, the command mode is automatically entered after opening the vi editor . Press the "a key" to switch to edit mode.
ESCPress the Esc key after typing to switch from edit mode to command mode.
:WqEnter: Wq, save and exit.
less mytest.txtRead the plain text file you just created with the " less " command . key to exit.q

8.3 Getting Started with Perl Language Basics

8.4 Perl Language Basics Advanced

For details, see: [Study Notes] Bioinformatics of Shandong University - Perl Language Basics + Advanced

8.5 Introduction to front-end development and HTML

● HTML—Hypertext Markup Language

HTML stands for Hyper Text Markup Language
HTML is not a programming language but a markup language
A markup language is a set of markup tags
HTML uses markup tags to describe web pages

● HTML5——The next generation of HTML
was released in October 2014, with new features:

canvas element for drawing
video and audio elements for media playback
Better support for local offline storage
new special content element
new form controls

● HTML tags

HTML tags are composed of keywords surrounded by angle brackets, eg <html>.
Tags usually come in pairs, such as and .
The first tag in a tag pair is the opening tag, and the second tag is the closing tag.
Keywords are placed between the opening and closing tags.
The keywords between tags are not necessary. Some tags can have no keywords, such as tags representing newlines  . In this case, it can be abbreviated as  .
Tags can be nested, that is, one pair of tags can contain another pair of tags.
<Tag1> <Tag2> </Tag2> </Tag1>✔
<Tag1> <Tag2> </Tag1> </Tag2>✖
Tags can have attributes. <tag attr1="value1" attr2="value2">Attributes will specify the tags.
Files written with tags are saved as .htmlfiles with a suffix of , which can be opened with Notepad or a browser. Browsers don't display HTML tags, but use tags to explain the content of the page.

● Structure of the HTML document
insert image description here

8.6 Common tags in HTML

See the video for details: HTML common tags-01 P144
Title tags <h1></h1> :
six levels, the smaller the number after the H, the larger the title font size.
```
<h1>Hello</h1>
<h2>Hello</h2>
<h3>Hello</h3>
```
Paragraph label  :
You can set the paragraph "center (center)", "left (left)", "right (right)" for the paragraph through alignthe attribute. The default is "left " .
```
This is a rubber.
This is a pencil.
This is a pen.
```
Line break tags  
Line break tags are different from paragraph tags. Line break tags only wrap lines and do not increase the spacing between paragraphs .
The newline tag is an empty tag, which can be abbreviated as  .
```
This is a rubber.
This is a pencil. This is a pen.
```
Horizontal line label The style of the horizontal line <hr/>
can be defined by size(height), width(width), align(alignment), (color) attributes. The horizontal line label is an empty label and can be abbreviated as .color
<hr/>
```
This is a pencil.
<hr width="100" color="blue" align="left"/>
This is a pen.
```
Text format label The display format of the text 
can be defined through size(size), face(font), (color) attributes.color
```

 This is a pencil.

This is a pen.
```
Text Effects Tags 
 are bold, italic, underlined, and <tt></tt>typewriter.
<tt></tt>Typewriter fonts are particularly suitable for displaying sequences due to the fixed width of characters .
```
 AIDTLI
 
 AIIDFL 
 
 SSDTFY 
 
<tt>
 AIDTLI 
 AIIDFL 
 SSDTEY 
</tt>
```

The bullet label <ul></ul>
<ul></ul> uses graphics as bulletstype , and the bullets can be defined as " square(square)", " circle(circle)" through the attribute, and the default is " disc( dot )". Each item <li></li>is represented by a subtag.
insert image description here

<ul>
  <li>tea</ 1i>
  <li> coffee </li>
  <ul type="square">
    <li>mouse</li>
    <li>dog </li>
    <li>cat </li>
  </ul>
  <li> milk</li>
  <ul type="circle">
    <li>mouse</li>
    <li>dog </li>
    <li>cat </li>
  </ul>
</ul>

Bullet tags <ol></ol>
<ol></ol> use numbers as bullets, and you can define bullets as " 1", " a", " i" and other different numbering forms through the type attribute, and the default is "1" . Each item <li></li>is represented by a subtag.
insert image description here

<ol>
  <li>tea</ 1i>
  <li> coffee </li>
  <ol type="i">
    <li>mouse</li>
    <li>dog </li>
    <li>cat </li>
  </ol>
  <li> milk</li>
  <ol type="a">
    <li>mouse</li>
    <li>dog </li>
    <li>cat </li>
  </ol>
</ol>

The picture tag specifies the position<img/>
of the picture through the attribute, and defines the display size of the picture through " (width)" and " (height)". The image tag is an empty tag and can be abbreviated as .srcwidthheight
<img/>
```
<img src="pen.jpg" width="100" height="60"/> 
 
<img src="http://www.view.sdu.edu.cn/images/logo.jpg"/>
```
The video tag <video></video>
specifies the video location through the attribute, displays controls to the user srcby defining the attribute , such as a play button, and automatically plays the video by defining the attribute .controls="controls"autoplay="autoplay"
```

<video src="./movie.ogg" controls="controls" autoplay=" autoplay">
your browser does not support the video tag
</video>
```

insert image description here

The hyperlink tag specifies the link position<a></a>
through the attribute , which can be linked to an external URL or to other web pages of this website. By defining an attribute , you can make the link open in a new window .hreftarget="_blank"
```

<a href="http://www.sdu.edu.cn" target="_blank"> SDU </a>
 

<a href="menu.html"> menu </a>
```

Table Tags <table></table>
◆ Define a row<tr></tr> through a subtag , define a column in a row through a subtag , and define the header column of the first row (automatically bold) through a subtag. ◆ Attributes define line width , and attributes define table width and height.<td></td><th></th>
borderwidthheight
insert image description here

<table border="1" width="300" height="100">
  <tr>
    <th>type</th>
    <th>name</th>
  </tr>
  <tr>
    <td>dog</td>
    <td>mike</td>
  </tr>
  <tr>
    <td>cat</td>
    <td>marry</td>
  </tr>
</table>

◆ bgcolor="yellow"Attributes can define the background color of the form , and background="bg.jpg"attributes can define the background image of the form . ◆ <tr></tr>The attribute can be added to the label alignto determine the horizontal alignment (left by default), and valignthe attribute to determine the vertical alignment (centered by default).
insert image description here

<table border="1" width="300" height="200" bgcolor="yellow">
  <tr>
    <th>type</th>
    <th>name</th>
  </tr>
  <tr align="center">
    <td>dog</td>
    <td>mike</td>
  </tr>
  <tr valign="top">
    <td>cat</td>
    <td>marry</td>
  </tr>
</table>

◆ By adding and attributes to <td></td>the label , the cells can be merged , colspan is the merged column , rowspan is the merged row . The attribute values of colspan and rowspan are the number of merged rows and columns . The cells being merged are labeled only once .colspanrowspan<td></td>
insert image description here

<table border="1" width="300" height="150" bgcolor="skyblue">
  <tr>
    <th>type</th>
    <th>name</th>
    <th>age</th>
  </tr>
  <tr align="center">
    <td colspan="2">dog</td>
    <td>3</td>
  </tr>
  <tr valign="center">
    <td rowspan="2">cat</td>
    <td>marry</td>
    <td>2</td>
  </tr>
  <tr align="center">
    <td>tom</td>
    <td>1</td>
  </tr>
</table>

Read more at: W3school

8.7 Design a simple web page

See the video for details : Designing Simple Web Pages-01 P146

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Homepage</title>
</head>
<body>
  <center>
    <h1>My Homepage</h1>
    <hr size="5" color="skyblue"/>
  </center>
  <table border="1" width="800" align="center">
    <tr>
      <td width="400" align="center">
        <img width="400" src="https://www.bing.com/th?id=OHR.OkavangoElephant_EN-CN0593145109_tmb.jpg" >
      </td>
      <td width="400" align="center">
        <video width="400" controls="controls" src="https://f.video.weibocdn.com/o0/kP4rMQC0lx07WKUsXgus01041200xtAN0E010.mp4?&Expires=1655143387&ssig=nMEjTVbnRf&KID=unistore,video"></video>
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <p align="center">
          <font size="5" color="green">欢迎来到我的课程中心</font>
        </p>
        <p><b>课程中心有以下课程：</b></p>
        <ol>
          <li>生物信息学</li>
          <li>大数据与精准医疗</li>
          <li>计算机在生命科学中的应用</li>
        </ol>
        <p>
          <b>常用链接：</b>
          <i><a href="http://www.sdu.edu.cn" target="_blank">山东大学</a></i>
          <i><a href="#">维基百科</a></i>
        </p>
        <p>
          <b>联系我们：</b><br/>
          联系人：巩老师<br/>
          联系电话：12345678<br/>
          <!-- 给邮箱加超链接 -->
          联系邮箱：<a href="mailto:[email protected]">[email protected]</a><br/>
          联系地址：XXXXXXXXXX
        </p>
      </td>
    </tr>
  </table>
</body>
</html>

8.8 Simple interaction between HTML and CGI

See the video for details : HTML and CGI Simple Interaction P149
Interactive web design : HTML + perl CGI program

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
</head>
<body>
    <form 
        action="./cig-bin/test.cgi" method="post" encType="multipart/form-data">
        <input name="yourname" size="40"/>
        <input type="submit" name="submitit" value="1"/>
    </form>
</body>
</html>

perl CGI

#!c:/Strawberry/perl/bin/perl.exe

use CGI qw(:standard); 	# 引用 CGI 模块
$cgi = new CGI;
$getname = $cgi->param("yourname");
print $cgi->header( -type=> "text/html");
print "<p>Hello $getname!</p>";

To realize the perfect cooperation between web pages and CGI, it is also necessary to install the main program of the APACHE httpd server, and set the public-html and cig-bin folders, then put the web pages and corresponding CGI programs into the corresponding folders, and pay attention to setting the CGI files read and write permissions to successfully run interactive web pages through the external address of APACHE.
Reference: Introduction to
Apache (httpd) Server Installation and Configuration on Windows
, Installation and How to Use Apache (httpd) (linux)

[Study Notes] Shandong University Bioinformatics-08 Programming Basics and Web Page Production

Article directory

Eight, programming basics and web page production

8.1 Linux operating system

8.2 Basic Linux commands

8.3 Getting Started with Perl Language Basics

8.4 Perl Language Basics Advanced

8.5 Introduction to front-end development and HTML

8.6 Common tags in HTML

8.7 Design a simple web page

8.8 Simple interaction between HTML and CGI

Guess you like