8000 pl_sql added · rankdeveloper/funcode@fc574ac · GitHub
[go: up one dir, main page]
Skip to content

Commit fc574ac

Browse files
rankdeveloperrankdeveloper
committed
pl_sql added
1 parent 80c05de commit fc574ac

File tree

5 files changed

+472
-1
lines changed

5 files changed

+472
-1
lines changed

‎index.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@
4646
<li><a href="./css/index.html" target="_blank">CSS</a></li>
4747
<li><a href="./js/index.html" target="_blank">JavaScript</a></li>
4848
<li><a href="./sql_tutorial/index.html" target="_blank">SQL</a></li>
49+
<li><a href="./pl_sql/index.html">PL/SQL</a></li>
4950
</ul>
5051
</nav>
5152

@@ -61,7 +62,7 @@
6162
<li><a href="./css/index.html">CSS</a></li>
6263
<li><a href="./js/index.html">JavaScript</a></li>
6364
<li><a href="./sql_tutorial/index.html">SQL</a></li>
64-
65+
<li><a href="./pl_sql/index.html">PL/SQL</a></li>
6566
</ul>
6667

6768

‎pl_sql/index.html

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
<html lang="en">
2+
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>PL/SQL-tutorial</title>
8+
<link rel="stylesheet" href="style.css">
9+
<link rel="stylesheet" href="./side-bar_content.css">
10+
11+
12+
</head>
13+
14+
<body>
15+
<div class="main">
16+
<div class="sidebar">
17+
<div class="flex">
18+
19+
<h1>PL/SQL</h1>
20+
21+
22+
<h5><a href="../index.html">GO HOME</a></h5>
23+
</div>
24+
<div class="searchbar">
25+
<input type="text" onkeyup="search()" id="search" placeholder="Enter to search">
26+
</div>
27+
28+
<div class="topics">
29+
<ul id="topic">
30+
<li><a href="#intro" class="item">Introduction</a></li>
31+
<li><a href="#advantages" class="item">advantages of plsql</a></li>
32+
<li><a href="#blocks" class="item">block structure</a></li>
33+
<li><a href="#" class="item">...</a></li>
34+
35+
36+
</ul>
37+
38+
</div>
39+
40+
41+
42+
</div>
43+
44+
<div class="main-content">
45+
<!-- <a href="#bottom">Bottom</a> -->
46+
<!-- introduction to sql -->
47+
<div class="one">
48+
<h2 id="intro">Introduction to pl/sql</h2>
49+
<hr>
50+
<p>PL/SQL is a procedural language designed specifically to embrace SQL statements within its syntax.
51+
PL/SQL program units are compiled by the Oracle Database server and stored inside the database. And
52+
at run-time, both PL/SQL and SQL run within the same server process, bringing optimal efficiency.
53+
PL/SQL automatically inherits the robustness, security, and portability of the Oracle
54+
Database.<br><br>
55+
PL/SQL is a powerful, yet straightforward database programming language. It is easy to both write
56+
and read, and comes packed with lots of out-of-the-box optimizations and security features. </p>
57+
58+
</div>
59+
<!-- end introduction to sql -->
60+
61+
<!-- what sql can do -->
62+
<div class="one" id="advantage">
63+
<h2>advantages of plsql</h2>
64+
<hr>
65+
66+
<ul>
67+
<li>It is a <b>standard database language</b> and PL/SQL is strongly integrated with SQL. PL/SQL
68+
supports both static and also dynamic SQL. Static SQL is said to support DML operations and also
69+
the transaction control from PL/SQL block. In dynamic SQL, SQL allows embedding the DDL
70+
statements in the PL/SQL blocks. </li>
71+
<li>Also, It then allows sending an entire block of statements to the database at one time. It
72+
reduces network traffic and also provides high performance for the applications. </li>
73+
<li>It gives high productivity to programmers as it can query, transform and also update the data in
74+
the database. </li>
75+
<li>This is said to save time on the design and also the debugging by strong features, like the
76+
exception handling, encapsulation, data hiding and also object-oriented data types.</li>
77+
<li>Applications that are written in PL/SQL languages are portable.</li>
78+
<li>This provides high security level.</li>
79+
<li>It also provides access to the predefined SQL packages.</li>
80+
<li>It also supports for Object-oriented programming. </li>
81+
<li>It provides support for developing web applications and server pages.</li>
82+
</ul>
83+
</div>
84+
<!-- end sql can do -->
85+
86+
<!-- sql syntax rules -->
87+
<div class="one" id="blocks">
88+
<h2>SQL Syntax rules</h2>
89+
<hr>
90+
<p>The basic program unit in PL/SQL is the block. A PL/SQL block is defined by the keywords DECLARE,
91+
BEGIN, EXCEPTION, and END. These keywords partition the block into a declarative part, an executable
92+
part, and an exception-handling part. Only the executable part is required. You can nest a block
93+
within another block wherever you can place an executable statement.</p>
94+
</div>
95+
<!-- end blocks -->
96+
<br><br>
97+
</div>
98+
99+
</div>
100+
101+
<script>
102+
const btns = document.querySelectorAll('.btns')
103+
btns.forEach((btn) => {
104+
btn.addEventListener('click', () => {
105+
const txt = btn.nextElementSibling.innerText;
106+
btn.innerHTML = "Copied";
107+
setTimeout(() => {
108+
btn.innerHTML = "Copy";
109+
}, 2000)
110+
copyToClipboard(txt)
111+
})
112+
})
113+
114+
function copyToClipboard(txt) {
115+
navigator.clipboard.writeText(txt)
116+
.then(() => console.log(`${txt} was copied...`))
117+
.catch((e) => console.log('Copy failed ${e}'))
118+
}
119+
120+
121+
122+
function search() {
123+
var input, filter, ul, li, a, i;
124+
input = document.getElementById("search");
125+
filter = input.value.toUpperCase();
126+
ul = document.getElementById("topic");
127+
li = ul.getElementsByTagName("li");
128+
for (i = 0; i < li.length; i++) {
129+
a = li[i].getElementsByTagName("a")[0];
130+
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
131+
li[i].style.display = "";
132+
} else {
133+
li[i].style.display = "none";
134+
}
135+
}
136+
}
137+
138+
var topics = document.getElementById("topics");
139+
var btn = topics.getElementsByClassName("item");
140+
for (var i = 0; i < btn.length; i++) {
141+
btn[i].addEventListener("click", function () {
142+
var current = document.getElementsByClassName("active");
143+
current[0].className = current[0].className.replace(" active", "");
144+
this.className += " active";
145+
});
146+
}
147+
</script>
148+
149+
150+
</body>
151+
152+
</html>

‎pl_sql/script.js

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
2+
const btns = document.querySelectorAll('.btns')
3+
btns.forEach((btn) => {
4+
btn.addEventListener('click', () => {
5+
const txt = btn.nextElementSibling.innerText;
6+
btn.innerHTML = "Copied";
7+
setTimeout(() => {
8+
btn.innerHTML = "Copy";
9+
}, 2000)
10+
copyToClipboard(txt)
11+
})
12+
})
13+
14+
function copyToClipboard(txt) {
15+
navigator.clipboard.writeText(txt)
16+
.then(() => console.log(`${txt} was copied...`))
17+
.catch((e) => console.log('Copy failed ${e}'))
18+
}
19+
20+
21+
function search() {
22+
var input, filter, ul, li, a, i;
23+
input = document.getElementById("search");
24+
filter = input.value.toUpperCase();
25+
ul = document.getElementById("topic");
26+
li = ul.getElementsByTagName("li");
27+
for (i = 0; i < li.length; i++) {
28+
a = li[i].getElementsByTagName("a")[0];
29+
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
30+
li[i].style.display = "";
31+
} else {
32+
li[i].style.display = "none";
33+
}
34+
}
35+
}

‎pl_sql/side-bar_content.css

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
5+
}
6+
7+
.main {
8+
display: flex;
9+
flex-direction: row;
10+
/* justify-content: space-between; */
11+
12+
color: white;
13+
gap: 10rem;
14+
/* padding:2rem; */
15+
}
16+
17+
.sidebar {
18+
height: 100%;
19+
width: 240px;
20+
position: fixed;
21+
z-index: 1;
22+
top: 0;
23+
left: 0;
24+
/* background-color: #111; */
25+
background-color: #dddddd;;
26+
overflow:scroll;
27+
padding: 20px 10px;
28+
}
29+
30+
.flex {
31+
display: flex;
32+
gap: 2rem;
33+
margin-bottom:2rem;
34+
justify-content: space-between;
35+
width: 100%;
36+
height: auto;
37+
}
38+
.flex h1{
39+
font-size: 3rem;
40+
}
41+
.flex h5{
42+
text-transform: uppercase;
43+
}
44+
45+
.searchbar{
46+
margin-top:5rem;
47+
48+
}
49+
.searchbar input{
50+
font-size:1rem;
51+
padding:5px;
52+
width: 100%;
53+
/* border-radius:5px; */
54+
outline: none;
55+
border: none;
56+
}
57+
58+
59+
60+
.topics{
61+
margin-top: 2rem;
62+
63+
}
64+
.topics ul{
65+
list-style: none;
66+
/* background-color: blue; */
67+
}
68+
.topics ul li {
69+
background-color:white;
70+
margin-top:5px;
71+
}
72+
73+
74+
.topics ul li a {
75+
padding: 6px 8px 6px 16px;
76+
text-decoration: none;
77+
/* font-size: 25px; */
78+
color: #818181;
79+
80+
display: block;
81+
}
82+
83+
.topics ul li a:hover{
84+
background-color:#ffa500;
85+
color:white;
86+
}
87+
88+
/* .btn {
89+
border: none;
90+
outline: none;
91+
padding: 10px 16px;
92+
background-color: #f1f1f1;
93+
cursor: pointer;
94+
font-size: 18px;
95+
} */
96+
97+
/* Style the active class, and buttons on mouse-over */
98+
.active, .btn:hover {
99+
background-color: #666;
100+
color: white;
101+
}
102+
103+
104+
105+
.main-content {
106+
/* margin-top: 2rem; */
107+
margin-left: 240px;
108+
line-height: 1.5rem;
109+
color: black;
110+
/* border: 1px solid red; */
111+
padding: 1rem 2rem 1rem 5rem;
112+
}

0 commit comments

Comments
 (0)
0